/* public/assets/css/social/breaking-news.css */

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

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

/* ==========================================
   第一排：16:9 电视新闻预览区
   ========================================== */
.bn-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"] .bn-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>'); }

/* 强制锁定 800x450 (16:9 标准宽屏)，绝不形变 */
.bn-capture-area { 
    width: 800px; min-width: 800px; 
    height: 450px; min-height: 450px; 
    position: relative; 
    background: #000; 
    font-family: "Impact", "Oswald", "Helvetica Neue", "Arial Black", sans-serif; 
    overflow: hidden; 
    border-radius: 8px; /* 模拟屏幕边框 */
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    transform-origin: top center;
}

/* 背景图自动裁剪填充 */
.bn-bg-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }

/* 顶部角标区 */
.bn-top-bar { position: absolute; top: 24px; left: 24px; right: 24px; display: flex; justify-content: space-between; z-index: 10; font-family: "Arial", sans-serif; }

.bn-live-badge { display: flex; align-items: center; gap: 6px; background: #dc2626; color: #fff; padding: 4px 10px; font-weight: 800; font-size: 16px; letter-spacing: 1px; border-radius: 4px; box-shadow: 0 2px 5px rgba(0,0,0,0.3); }
.live-dot { width: 10px; height: 10px; background: #fff; border-radius: 50%; }

.bn-time-badge { background: rgba(0,0,0,0.6); color: #fff; padding: 4px 10px; font-weight: 700; font-size: 16px; border-radius: 4px; backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,0.2); }

/* 底部字幕条架构 (Lower Third) */
.bn-lower-third { position: absolute; bottom: 30px; left: 40px; right: 40px; z-index: 10; display: flex; flex-direction: column; box-shadow: 0 5px 20px rgba(0,0,0,0.5); }

.bn-headline-row { display: flex; align-items: stretch; min-height: 60px; }
.bn-banner-title { display: flex; align-items: center; justify-content: center; padding: 10px 24px; font-size: 26px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; }
.bn-headline-text { flex: 1; display: flex; align-items: center; padding: 10px 24px; font-size: 32px; font-family: "Arial", sans-serif; font-weight: 900; text-transform: uppercase; line-height: 1.1; }

.bn-ticker-row { display: flex; align-items: stretch; min-height: 36px; font-family: "Arial", sans-serif; }
.bn-ticker-label { display: flex; align-items: center; padding: 0 16px; font-size: 16px; font-weight: 900; letter-spacing: 0.5px; white-space: nowrap; }
.bn-ticker-text { flex: 1; display: flex; align-items: center; padding: 0 16px; font-size: 18px; font-weight: 700; white-space: nowrap; overflow: hidden; }

/* 🌟 主题色彩定义 */
/* Classic (CNN Style) */
.theme-classic .bn-banner-title { background: #dc2626; color: #fff; }
.theme-classic .bn-headline-text { background: #ffffff; color: #000000; }
.theme-classic .bn-ticker-label { background: #000000; color: #facc15; }
.theme-classic .bn-ticker-text { background: #1e1e1e; color: #ffffff; border-top: 1px solid #333; }

/* Dark (BBC Style) */
.theme-dark .bn-banner-title { background: #991b1b; color: #fff; }
.theme-dark .bn-headline-text { background: #b91c1c; color: #fff; border-left: 2px solid #fff; }
.theme-dark .bn-ticker-row { border-top: 2px solid #fff; }
.theme-dark .bn-ticker-label { background: #ffffff; color: #991b1b; }
.theme-dark .bn-ticker-text { background: #000000; color: #ffffff; }

/* Blue (Fox/Tech Style) */
.theme-blue .bn-live-badge { background: #ea580c; } /* 橙色 live */
.theme-blue .bn-banner-title { background: #1e3a8a; color: #fff; }
.theme-blue .bn-headline-text { background: #f8fafc; color: #1e3a8a; border-left: 4px solid #ea580c; }
.theme-blue .bn-ticker-label { background: #ea580c; color: #fff; }
.theme-blue .bn-ticker-text { background: #2563eb; color: #ffffff; }


/* ==========================================
   第二排：控制面板 (网格)
   ========================================== */
.bn-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: 1fr 1.5fr; 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(220, 38, 38, 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: #dc2626; }
.input-group input[type="file"] { font-size: 0.85rem; color: var(--text-muted); padding-top: 4px; }
.input-group textarea { resize: vertical; font-family: inherit; }

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

.bn-btn-primary { background: #dc2626; 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(220, 38, 38, 0.3); width: 100%; }
.bn-btn-primary:hover { background: #b91c1c; transform: translateY(-2px); }

.bn-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: 850px) {
    .bn-controls { grid-template-columns: 1fr; gap: 24px; }
    .bn-preview-wrapper { padding: 20px 10px; }
}