/* ═══════════════════════════════════════════════════
   AutoCom / BEACON — CSS
   Uses MI Design System (mi-card, mi-card-grid, mi-row-label)
   Layout: Arena-Pattern (Tabs + Sticky Sidebar + ScrollSpy)
   ═══════════════════════════════════════════════════ */

/* ── AutoCom Design Tokens ── */
#autocom-content {
    --ac-accent: var(--accent, #34d399);
    --ac-error: #ef4444;
}

/* ── Container Override ── */
#autocom-content.main-content-wrapper {
    overflow: visible;
    height: auto;
    min-height: 0;
}

/* ── Tab Layout ── */
.autocom-layout { width: 100%; }
.ac-tab-content { display: none; }
.ac-tab-content.active { display: block; }
/* Social tab layout is handled by initSubPrism (.prism-layout) */

/* ── Section Navigation (reuses Arena .section-nav pattern) ── */
.ac-tab-content .section-nav {
    width: 200px;
    min-width: 180px;
    flex-shrink: 0;
    position: sticky;
    top: 120px;
    height: calc(100vh - 140px);
    padding: 16px 10px;
    overflow-y: auto;
    background: var(--bg, #0a0a0a);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--radius, 12px);
}

.ac-tab-content .section-nav-title {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    color: var(--text-tertiary, rgba(255,255,255,0.32));
    margin-bottom: 14px;
    font-weight: 600;
    padding-left: 10px;
}

.ac-tab-content .section-nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: var(--radius-sm, 8px);
    cursor: pointer;
    transition: all 0.15s ease;
    color: var(--text-secondary, rgba(255,255,255,0.55));
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 2px;
    text-decoration: none;
}

.ac-tab-content .section-nav-item:hover {
    background: rgba(255,255,255,0.03);
    color: var(--text-primary, #fff);
}

.ac-tab-content .section-nav-item.active {
    background: rgba(255,255,255,0.05);
    color: var(--text-primary, #fff);
    font-weight: 700;
}

.ac-tab-content .section-nav-item .nav-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-tertiary, rgba(255,255,255,0.32));
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.ac-tab-content .section-nav-item.active .nav-dot {
    background: var(--accent, #34d399);
    box-shadow: 0 0 6px var(--accent-mid, rgba(52,211,153,0.4));
}

/* Nav group labels (used in Social tab tier grouping) */
.ac-tab-content .section-nav-group-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-tertiary, rgba(255,255,255,0.25));
    margin: 12px 0 4px 10px;
    font-weight: 500;
}
.ac-tab-content .section-nav-group-label:first-of-type {
    margin-top: 0;
}

/* ── Content Area ── */
.ac-content {
    flex: 1;
    min-width: 0;
}

.ac-section {
    margin-bottom: 32px;
    scroll-margin-top: 80px;
}

.ac-section-body { min-height: 60px; }

/* ── Empty States ── */
.ac-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    text-align: center;
    color: var(--text-tertiary, rgba(255,255,255,0.32));
    gap: 8px;
}

.ac-empty-state p {
    font-size: 13px;
    max-width: 300px;
    line-height: 1.5;
}

/* ── Kanban Board ── */
.ac-kanban-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
}

.ac-kanban-col {
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--glass-border, rgba(255,255,255,0.08));
    border-radius: var(--radius, 12px);
    padding: 10px;
    min-height: 200px;
}

.ac-kanban-col-header {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-tertiary, rgba(255,255,255,0.32));
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ac-count-badge {
    background: rgba(255,255,255,0.06);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 500;
    color: rgba(255,255,255,0.4);
    margin-left: auto;
}

.ac-kanban-cards { display: flex; flex-direction: column; gap: 6px; }
.ac-kanban-empty { font-size: 11px; color: var(--text-tertiary, rgba(255,255,255,0.32)); text-align: center; padding: 20px 8px; }

/* ── Kanban Card (inside columns) ── */
.ac-card {
    background: var(--glass-bg, rgba(255,255,255,0.04));
    border: 1px solid var(--glass-border, rgba(255,255,255,0.08));
    border-radius: var(--radius-sm, 8px);
    padding: 10px;
    transition: all 0.2s ease;
}

.ac-card:hover {
    border-color: var(--glass-border-hover, rgba(255,255,255,0.12));
    transform: translateY(-1px);
}

.ac-card-title { font-size: 12px; font-weight: 600; margin-bottom: 4px; line-height: 1.3; }
.ac-card-meta { display: flex; gap: 4px; flex-wrap: wrap; font-size: 10px; }

/* ── Platform Header (Social Tab — horizontal row) ── */
.ac-plat-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.ac-plat-info {
    flex: 1;
    min-width: 0;
}
.ac-plat-name {
    font-size: 13px;
    font-weight: 700;
    color: rgba(255,255,255,0.88);
    line-height: 1.2;
}
.ac-platform-icon {
    width: 32px; height: 32px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.9); flex-shrink: 0;
}
.ac-platform-icon i,
.ac-platform-icon svg {
    width: 16px; height: 16px;
}

/* ── Tags & Badges (subtle labels) ── */
.ac-type-badge {
    display: inline-block; padding: 1px 6px; border-radius: 4px;
    font-size: 10px; font-weight: 500; letter-spacing: 0.2px;
    background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.5);
}

.ac-type-badge.type-post { color: rgba(59,130,246,0.7); }
.ac-type-badge.type-carousel { color: rgba(168,85,247,0.7); }
.ac-type-badge.type-article, .ac-type-badge.type-articles { color: rgba(245,158,11,0.7); }
.ac-type-badge.type-git_log { color: rgba(16,185,129,0.7); }
.ac-type-badge.type-trend { color: rgba(236,72,153,0.7); }
.ac-type-badge.type-content_performance { color: rgba(59,130,246,0.7); }
.ac-type-badge.type-channel_insight { color: rgba(6,182,212,0.7); }
.ac-type-badge.type-feedback { color: rgba(168,85,247,0.7); }

.ac-channel-tag {
    display: inline-block; padding: 1px 6px; border-radius: 3px;
    font-size: 9px; font-weight: 500;
    background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.4);
}

.ac-format-tag {
    display: inline-block; padding: 1px 6px; border-radius: 3px;
    font-size: 10px; font-weight: 500;
    background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.4);
}

.ac-narrative-level { font-size: 9px; color: rgba(255,255,255,0.3); }

.ac-urgency-badge {
    display: inline-block; padding: 1px 6px; border-radius: 3px;
    font-size: 9px; font-weight: 500;
    background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.5);
}
.ac-urgency-badge.urgency-high { color: rgba(239,68,68,0.7); }
.ac-urgency-badge.urgency-medium { color: rgba(245,158,11,0.7); }
.ac-urgency-badge.urgency-low { color: rgba(136,136,136,0.6); }

.ac-relevance, .ac-confidence {
    font-size: 10px; color: var(--text-tertiary, rgba(255,255,255,0.32)); margin-left: auto;
}

/* ── Idea Cards ── */
.ac-idea-card { border-left: 3px solid var(--accent); }
.ac-idea-title { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.ac-idea-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.4; margin-bottom: 8px; }
.ac-idea-actions { display: flex; gap: 6px; margin-top: 8px; }
.ac-idea-actions .obs-btn { font-size: 11px; padding: 4px 10px; }
.ac-btn-reject:hover { border-color: var(--error, rgba(239,68,68,0.4)); color: var(--error); }

/* ── Content Ratios ── */
.ac-ratio-grid { display: flex; flex-direction: column; gap: 12px; }

.ac-ratio-label {
    font-size: 10px; font-weight: 500;
    color: var(--text-tertiary, rgba(255,255,255,0.32));
    text-transform: uppercase; letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.ac-ratio-bar {
    height: 6px;
    background: rgba(255,255,255,0.04);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 3px;
}

.ac-ratio-fill { height: 100%; border-radius: 3px; transition: width 0.5s ease; }

.ac-ratio-values {
    display: flex; justify-content: space-between;
    font-size: 10px; color: var(--text-tertiary, rgba(255,255,255,0.32));
}

/* ── Responsive ── */
@media (max-width: 1200px) {
    .ac-kanban-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
    .ac-section-layout { flex-direction: column; }
    .ac-tab-content .section-nav {
        width: 100%; position: static; height: auto;
        display: flex; gap: 2px; padding: 8px; overflow-x: auto;
    }
    .ac-tab-content .section-nav-title { display: none; }
    .ac-tab-content .section-nav-item { white-space: nowrap; padding: 6px 12px; }
    .ac-kanban-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .ac-kanban-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════
   WS3: Calendar, Queue, Channels, Performance, Strategy, Kanban D&D
   ══════════════════════════════════════════════════════ */

/* Calendar */
.ac-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.ac-calendar-day { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; padding: 8px; min-height: 120px; }
.ac-calendar-day.today { border-color: rgba(52,211,153,0.3); }
.ac-calendar-day-header { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 0.8rem; color: rgba(255,255,255,0.5); }
.ac-calendar-day-num { font-weight: 600; color: rgba(255,255,255,0.8); }
.ac-calendar-item { font-size: 0.75rem; padding: 4px 6px; background: rgba(255,255,255,0.04); border-radius: 4px; margin-bottom: 4px; }
.ac-calendar-item-title { color: rgba(255,255,255,0.7); margin-left: 4px; }
.ac-calendar-empty { color: rgba(255,255,255,0.15); text-align: center; padding: 20px 0; }

/* Queue */
.ac-queue-list { display: flex; flex-direction: column; gap: 8px; }
.ac-queue-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: rgba(255,255,255,0.03); border-radius: 8px; }
.ac-queue-date { font-size: 0.8rem; color: rgba(255,255,255,0.5); min-width: 80px; }
.ac-queue-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ac-accent); flex-shrink: 0; }
.ac-queue-content { display: flex; align-items: center; gap: 8px; flex: 1; }
.ac-queue-title { color: rgba(255,255,255,0.8); font-size: 0.9rem; }

/* Chart Container */
.ac-chart-container { width: 100%; min-height: 200px; }

/* Channels Table */
.ac-channels-table { width: 100%; }
.ac-channels-header { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; padding: 8px 12px; font-size: 0.75rem; color: rgba(255,255,255,0.4); text-transform: uppercase; border-bottom: 1px solid rgba(255,255,255,0.06); }
.ac-channels-row { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; padding: 10px 12px; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.04); }
.ac-channels-name { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; }
.ac-channels-num { font-size: 0.9rem; color: rgba(255,255,255,0.7); }
.ac-channels-num.green { color: var(--ac-accent); }

/* Performance List */
.ac-perf-list { display: flex; flex-direction: column; gap: 8px; }
.ac-perf-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: rgba(255,255,255,0.03); border-radius: 8px; }
.ac-perf-rank { font-weight: 700; color: var(--ac-accent); min-width: 30px; }
.ac-perf-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ac-perf-title { font-size: 0.9rem; color: rgba(255,255,255,0.85); }
.ac-perf-platform { font-size: 0.75rem; color: rgba(255,255,255,0.4); }
.ac-perf-metrics { display: flex; gap: 16px; font-size: 0.85rem; color: rgba(255,255,255,0.6); }

/* Strategy Editor */
.ac-strategy-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; padding: 16px; margin-bottom: 12px; }
.ac-strategy-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.ac-strategy-header h4 { font-size: 0.95rem; text-transform: capitalize; color: rgba(255,255,255,0.8); }
.ac-strategy-view pre { font-size: 0.8rem; color: rgba(255,255,255,0.55); white-space: pre-wrap; word-break: break-word; font-family: 'SF Mono', monospace; }
.ac-strategy-textarea { width: 100%; min-height: 150px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 12px; color: rgba(255,255,255,0.9); font-family: 'SF Mono', monospace; font-size: 0.8rem; resize: vertical; margin-bottom: 8px; }

/* Kanban Drag & Drop */
.ac-card.dragging { opacity: 0.4; }
.ac-kanban-col.drag-over { border: 2px dashed rgba(52,211,153,0.4); background: rgba(52,211,153,0.03); }

/* Calendar Responsive */
@media (max-width: 900px) {
    .ac-calendar-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 600px) {
    .ac-calendar-grid { grid-template-columns: repeat(2, 1fr); }
    .ac-channels-header, .ac-channels-row { grid-template-columns: 2fr 1fr 1fr; }
    .ac-channels-header span:last-child, .ac-channels-row span:last-child { display: none; }
}

/* ══════════════════════════════════════════════════════
   WS2: Media Cards, Credential Status, Copy Button, Modal
   ══════════════════════════════════════════════════════ */

/* Media Cards */
.ac-media-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 12px;
    transition: border-color 0.2s;
}
.ac-media-card:hover { border-color: rgba(255,255,255,0.15); }
.ac-media-card-header { display: flex; gap: 8px; margin-bottom: 10px; }
.ac-media-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 8px; color: rgba(255,255,255,0.92); }
.ac-media-excerpt { color: rgba(255,255,255,0.55); font-size: 0.9rem; line-height: 1.5; margin-bottom: 12px; }
.ac-media-footer { display: flex; align-items: center; gap: 12px; font-size: 0.8rem; color: rgba(255,255,255,0.4); }
.ac-media-lang { text-transform: uppercase; font-weight: 600; }

/* Status badge colors for media cards */
.ac-type-badge.published { color: rgba(52,211,153,0.7); }
.ac-type-badge.draft { color: rgba(255,255,255,0.4); }
.ac-type-badge.review { color: rgba(245,158,11,0.7); }
.ac-type-badge.approved { color: rgba(59,130,246,0.7); }
.ac-type-badge.scheduled { color: rgba(168,85,247,0.7); }
.ac-type-badge.narrative { color: rgba(6,182,212,0.7); }

/* Credential Status Dot */
.ac-credential-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: rgba(255,255,255,0.15);
    display: inline-block; margin-left: 8px;
    transition: background 0.2s;
}
.ac-credential-dot.connected { background: var(--ac-accent); box-shadow: 0 0 6px rgba(52,211,153,0.4); }

/* Copy Button */
.ac-copy-btn {
    background: none; border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px; padding: 4px 8px; cursor: pointer;
    color: rgba(255,255,255,0.5); transition: all 0.2s;
}
.ac-copy-btn:hover { border-color: var(--ac-accent); color: var(--ac-accent); }

/* Credential Modal */
.ac-modal-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.7); z-index: 10000;
    display: flex; align-items: center; justify-content: center;
}
.ac-modal {
    background: var(--glass-bg); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px; padding: 24px; width: 420px; max-width: 90vw;
}
.ac-modal h3 { font-size: 1.1rem; margin-bottom: 16px; }
.ac-modal-body { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.ac-modal-body label { font-size: 0.85rem; color: rgba(255,255,255,0.55); }
.ac-modal-body input {
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px; padding: 10px 12px; color: rgba(255,255,255,0.92);
    font-size: 0.9rem; outline: none;
}
.ac-modal-body input:focus { border-color: var(--ac-accent); }
.ac-modal-footer { display: flex; gap: 8px; justify-content: flex-end; }

/* Connect Button on Platform Cards */
.ac-connect-btn {
    font-size: 11px; padding: 4px 12px; border-radius: 6px;
    background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.5);
    border: 1px solid rgba(255,255,255,0.1); cursor: pointer;
    transition: all 0.2s; flex-shrink: 0; white-space: nowrap;
}
.ac-connect-btn:hover { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7); }

/* ══════════════════════════════════════════════════════
   WS6: Platform Preview Frames
   Each frame mimics the target platform's visual style
   ══════════════════════════════════════════════════════ */

.ac-preview-modal { background: #1a1a1a; border: 1px solid rgba(255,255,255,0.12); }

.ac-preview-frame {
    border-radius: 8px;
    padding: 20px;
    margin-top: 4px;
}

/* Medium — Clean serif */
.ac-preview-medium {
    background: #ffffff;
    border: 1px solid #e6e6e6;
    font-family: Georgia, 'Times New Roman', serif;
    padding: 32px;
}

/* Preview tab active state */
#ac-preview-tabs .ac-btn.active {
    border-color: rgba(255,255,255,0.2);
}

/* ─── Strategy Redesign ─── */
.ac-strategy-card { margin-bottom: 16px; }
.ac-strategy-body { padding: 0 4px; }
.ac-strategy-body p { font-size: 13px; line-height: 1.6; color: var(--text-secondary, #ccc); margin-bottom: 8px; }
.ac-strategy-body ul { margin: 0 0 12px 20px; padding: 0; }
.ac-strategy-body ul li { font-size: 13px; line-height: 1.5; color: var(--text-secondary, #ccc); margin-bottom: 4px; }

.ac-strategy-quote { font-style: italic; color: var(--text-primary, #fff) !important; border-left: 3px solid var(--mi-accent, #34d399); padding-left: 12px; margin-bottom: 12px !important; }

.ac-strategy-dolist { margin-bottom: 12px; }
.ac-strategy-label-do { color: var(--mi-accent, #34d399); font-size: 11px; text-transform: uppercase; letter-spacing: 0.8px; }
.ac-strategy-label-dont { color: var(--ac-error); font-size: 11px; text-transform: uppercase; letter-spacing: 0.8px; }

.ac-strategy-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* Personas */
.ac-strategy-personas { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.ac-strategy-persona-card {
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px; padding: 14px;
}
.ac-strategy-persona-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ac-strategy-persona-header i { width: 16px; height: 16px; color: var(--mi-accent, #34d399); }
.ac-strategy-persona-header strong { font-size: 13px; }
.ac-strategy-persona-meta { font-size: 11px; color: var(--text-tertiary, #888); margin-bottom: 6px; }
.ac-strategy-persona-pain { font-size: 12px; font-style: italic; color: var(--text-secondary, #ccc) !important; }

/* Narratives */
.ac-strategy-narratives { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.ac-strategy-narrative-card {
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px; padding: 14px;
}
.ac-strategy-narrative-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ac-strategy-narrative-header i { width: 16px; height: 16px; }
.ac-strategy-narrative-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* Ratios */
.ac-strategy-ratio-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
.ac-strategy-ratio-row:last-child { border-bottom: none; }
.ac-strategy-ratio-label { font-size: 12px; color: var(--text-secondary, #ccc); min-width: 130px; }
.ac-strategy-ratio-value { font-size: 13px; font-weight: 600; min-width: 50px; text-align: right; }

/* Forbidden words */
.ac-strategy-forbidden-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ac-strategy-forbidden-word { color: var(--ac-error); }
.ac-strategy-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ac-strategy-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-tertiary, #888); padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
.ac-strategy-table td { padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }

/* Channels */
.ac-strategy-channels { display: flex; flex-direction: column; gap: 8px; }
.ac-strategy-channel-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
.ac-strategy-channel-row:last-child { border-bottom: none; }
.ac-strategy-channel-row strong { font-size: 13px; min-width: 100px; }
.ac-strategy-channel-details { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; color: var(--text-secondary, #ccc); }

/* Collapsible */
.ac-strategy-collapsible { position: relative; }
.ac-strategy-expand-btn { background: none; border: none; color: var(--mi-accent, #34d399); cursor: pointer; font-size: 12px; padding: 4px 0; }

/* ═══════════════════════════════════════════════════
   Overview / Daily Check
   ═══════════════════════════════════════════════════ */
.ac-overview-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 16px;
}

.ac-daily-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}
.ac-daily-header h2 {
    font-size: 22px;
    font-weight: 600;
    color: var(--text-primary, #fff);
}
.ac-daily-subtitle {
    color: var(--text-tertiary, rgba(255,255,255,0.32));
    font-size: 13px;
    margin-top: 4px;
}
.ac-daily-date {
    color: var(--text-tertiary, rgba(255,255,255,0.32));
    font-size: 13px;
}

/* Stat Cards Grid */
.ac-daily-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 28px;
}
.ac-stat-card {
    background: rgba(28, 28, 30, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 18px 20px;
    backdrop-filter: blur(40px) saturate(180%);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2), 0 0 1px rgba(255,255,255,0.05);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.ac-stat-card:hover {
    background: rgba(35, 35, 40, 0.7);
    border-color: rgba(255, 255, 255, 0.12);
    transform: translateY(-1px);
}
.ac-stat-label {
    font-size: 11px;
    color: var(--text-secondary, rgba(255,255,255,0.6));
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 500;
    margin-bottom: 6px;
}
.ac-stat-value {
    font-size: 32px;
    font-weight: 600;
    color: var(--text-primary, #fff);
}
.ac-stat-change {
    font-size: 11px;
    margin-top: 4px;
    color: var(--text-tertiary, rgba(255,255,255,0.32));
}
.ac-stat-change.up {
    color: var(--mi-accent, #34d399);
}

/* Daily Sections */
.ac-daily-section {
    margin-bottom: 28px;
}
.ac-daily-section h3 {
    font-size: 12px;
    color: var(--text-secondary, rgba(255,255,255,0.6));
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 500;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ac-section-count {
    background: rgba(52, 211, 153, 0.12);
    color: var(--mi-accent, #34d399);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
}

/* Content Cards */
.ac-content-card {
    background: rgba(28, 28, 30, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 16px 20px;
    margin-bottom: 8px;
    backdrop-filter: blur(20px) saturate(150%);
    box-shadow: 0 0 1px rgba(255,255,255,0.05);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.ac-content-card:hover {
    background: rgba(35, 35, 40, 0.7);
    border-color: var(--mi-accent, #34d399);
    transform: translateY(-2px) scale(1.005);
    box-shadow: 0 4px 16px rgba(0,0,0,0.3), 0 0 0 1px rgba(52,211,153,0.2);
}
.ac-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}
.ac-card-channel {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Channel Badges */
.ac-channel-badge {
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.06);
    color: var(--text-secondary, rgba(255,255,255,0.6));
}
.ac-channel-badge.linkedin { background: rgba(0,122,255,0.1); color: #4da3ff; border-color: rgba(0,122,255,0.2); }
.ac-channel-badge.good-news { background: rgba(52,211,153,0.1); color: var(--mi-accent, #34d399); border-color: rgba(52,211,153,0.2); }
.ac-channel-badge.blog { background: rgba(255,255,255,0.06); color: var(--text-secondary, rgba(255,255,255,0.6)); }
.ac-channel-badge.podcast { background: rgba(175,82,222,0.1); color: #c77dff; border-color: rgba(175,82,222,0.2); }
.ac-channel-badge.newsletter { background: rgba(255,255,255,0.06); color: var(--text-secondary, rgba(255,255,255,0.6)); }
.ac-channel-badge.press { background: rgba(255,255,255,0.06); color: var(--text-secondary, rgba(255,255,255,0.6)); }

/* Narrative Dots */
.ac-narrative-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}
.ac-narrative-dot.product { background: #4da3ff; }
.ac-narrative-dot.vision { background: #c77dff; }
.ac-narrative-dot.purpose { background: var(--mi-accent, #34d399); }

/* Card Urgency */
.ac-card-urgency {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 8px;
    font-weight: 500;
    color: var(--text-tertiary, rgba(255,255,255,0.32));
}
.ac-card-urgency.high {
    background: rgba(239, 68, 68, 0.1);
    color: #f87171;
}
.ac-card-urgency.medium {
    background: rgba(251, 191, 36, 0.1);
    color: #fbbf24;
}

.ac-content-card h4 {
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 6px;
    line-height: 1.4;
    color: var(--text-primary, #fff);
}
.ac-card-meta {
    font-size: 11px;
    color: var(--text-tertiary, rgba(255,255,255,0.32));
    display: flex;
    gap: 16px;
}
.ac-card-actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}

.ac-overview-empty {
    text-align: center;
    padding: 24px;
    color: var(--text-tertiary, rgba(255,255,255,0.32));
    font-size: 13px;
}

/* ═══════════════════════════════════════════════════
   Good News — Magazine Layout
   ═══════════════════════════════════════════════════ */
.ac-goodnews-magazine {
    max-width: 680px;
    margin: 0 auto;
}
.ac-goodnews-header {
    text-align: center;
    padding: 20px 0 16px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 20px;
}
.ac-goodnews-logo {
    font-size: 18px;
    font-weight: 300;
    letter-spacing: 3px;
    color: var(--text-primary, #fff);
    margin-bottom: 4px;
}
.ac-goodnews-date {
    font-size: 12px;
    color: var(--text-tertiary, rgba(255,255,255,0.32));
}
.ac-goodnews-item {
    padding: 16px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ac-goodnews-item:last-of-type {
    border-bottom: none;
}
.ac-goodnews-category {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 600;
    color: var(--mi-accent, #34d399);
    margin-bottom: 6px;
}
.ac-goodnews-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary, #fff);
    line-height: 1.4;
    margin-bottom: 6px;
}
.ac-goodnews-context {
    font-size: 13px;
    color: var(--text-secondary, rgba(255,255,255,0.6));
    line-height: 1.5;
    margin-bottom: 4px;
}
.ac-goodnews-source {
    font-size: 10px;
    color: var(--text-tertiary, rgba(255,255,255,0.32));
}
.ac-goodnews-footer {
    text-align: center;
    padding: 16px 0 8px;
    font-size: 11px;
    color: var(--text-tertiary, rgba(255,255,255,0.32));
    border-top: 1px solid rgba(255,255,255,0.06);
    margin-top: 8px;
}

/* ═══════════════════════════════════════════════════
   Calendar — Month View
   ═══════════════════════════════════════════════════ */
.ac-month-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.ac-month-header-cell {
    text-align: center;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-tertiary, rgba(255,255,255,0.32));
    padding: 8px 0;
    font-weight: 600;
}
.ac-month-cell {
    min-height: 60px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 6px;
    padding: 6px;
    transition: background 0.2s;
}
.ac-month-cell:hover {
    background: rgba(255,255,255,0.04);
}
.ac-month-cell.empty {
    background: transparent;
    border-color: transparent;
}
.ac-month-cell.today {
    border-color: var(--mi-accent, #34d399);
    background: rgba(52, 211, 153, 0.05);
}
.ac-month-cell-num {
    font-size: 12px;
    color: var(--text-secondary, rgba(255,255,255,0.6));
    margin-bottom: 4px;
}
.ac-month-cell.today .ac-month-cell-num {
    color: var(--mi-accent, #34d399);
    font-weight: 600;
}
.ac-month-dots {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}
.ac-month-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}

/* Calendar view toggle active state */
.ac-btn-active {
    background: rgba(255,255,255,0.1) !important;
    border-color: rgba(255,255,255,0.15) !important;
}

/* ═══════════════════════════════════════════════════
   Social Platform — Content Summary
   ═══════════════════════════════════════════════════ */
.ac-social-summary {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.ac-social-summary-row {
    font-size: 12px;
    color: var(--text-secondary, rgba(255,255,255,0.6));
    padding: 3px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ac-social-summary-label {
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-tertiary, rgba(255,255,255,0.32));
    min-width: 40px;
}
.ac-social-summary-time {
    font-size: 10px;
    color: var(--text-tertiary, rgba(255,255,255,0.32));
    margin-left: auto;
}
.ac-social-summary-empty {
    font-size: 11px;
    color: var(--text-tertiary, rgba(255,255,255,0.32));
    font-style: italic;
}
.ac-social-draft-preview {
    font-size: 11px;
    color: var(--text-secondary);
    padding: 4px 0;
    line-height: 1.4;
    border-top: 1px solid rgba(255,255,255,0.04);
}
.ac-social-draft-preview .gs-badge { font-size: 9px; margin-right: 6px; }

/* ── Spacing between preview cards ── */
.ac-social-summary .ac-preview-card + .ac-preview-card {
    margin-top: 12px;
}
#ac-tab-social .ac-section + .ac-section {
    margin-top: 8px;
}

/* ── Inline-Style replacements ── */
.ac-platform-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ac-platform-meta {
    font-size: 11px;
    color: var(--text-tertiary);
    line-height: 1.3;
    margin-top: 2px;
}
.ac-format-tags {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.ac-platform-note {
    font-size: 11px;
    color: var(--text-tertiary);
    font-style: italic;
    margin-bottom: 8px;
}

/* ═══════════════════════════════════════════════════
   Social Tab — Platform Content Preview Cards
   Realistic platform mockups for draft previews
   ═══════════════════════════════════════════════════ */

/* ── Platform Accent Colors ── */
:root {
    --ac-linkedin: rgba(10, 102, 194, 1);
    --ac-twitter: rgba(29, 155, 240, 1);
    --ac-reddit: rgba(255, 69, 0, 1);
    --ac-instagram-pink: rgba(225, 48, 108, 1);
    --ac-instagram-purple: rgba(131, 58, 180, 1);
    --ac-instagram-orange: rgba(253, 89, 73, 1);
    --ac-facebook: rgba(24, 119, 242, 1);
    --ac-xing: rgba(0, 101, 103, 1);
}

/* ── Shared: Base Card ── */
.ac-preview-card {
    padding: 12px;
    border-radius: 8px;
    max-width: 500px;
    width: 100%;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 13px;
    line-height: 1.5;
    overflow: hidden;
    transition: border-color 0.2s ease;
}

/* ── Shared: Profile Header Row ── */
.ac-preview-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

/* ── Shared: Avatar Circle ── */
.ac-preview-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}

/* ── Shared: Name ── */
.ac-preview-name {
    font-weight: 700;
    font-size: 13px;
    line-height: 1.2;
}

/* ── Shared: Handle / Subtitle ── */
.ac-preview-handle {
    font-size: 12px;
    opacity: 0.5;
    line-height: 1.2;
}

/* ── Shared: Content Body ── */
.ac-preview-body {
    font-size: 13px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 8px;
}

/* ── Shared: Action Bar ── */
.ac-preview-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: 8px;
    font-size: 12px;
    opacity: 0.45;
}
.ac-preview-actions span {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: default;
}

/* ── Shared: Meta / Timestamp ── */
.ac-preview-meta {
    font-size: 11px;
    opacity: 0.35;
    margin-left: auto;
}

/* ─────────────────────────────────────
   1. LinkedIn Preview
   ───────────────────────────────────── */
.ac-preview-linkedin {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}
.ac-preview-linkedin .ac-preview-avatar {
    background: var(--ac-linkedin);
    color: rgba(255, 255, 255, 0.95);
}
.ac-preview-linkedin .ac-preview-name {
    color: rgba(255, 255, 255, 0.88);
}
.ac-preview-linkedin .ac-preview-handle {
    color: rgba(255, 255, 255, 0.4);
    font-size: 11px;
}
.ac-preview-linkedin .ac-preview-body {
    color: rgba(255, 255, 255, 0.7);
}
.ac-preview-linkedin .ac-preview-actions {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.45);
    justify-content: space-around;
    padding-top: 10px;
    margin-top: 4px;
    font-size: 11px;
    font-weight: 600;
}

/* ─────────────────────────────────────
   2. Twitter/X Preview
   ───────────────────────────────────── */
.ac-preview-twitter {
    background: rgba(21, 32, 43, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 12px;
}
.ac-preview-twitter .ac-preview-avatar {
    background: rgba(255, 255, 255, 0.1);
    width: 36px;
    height: 36px;
}
.ac-preview-twitter .ac-preview-header {
    align-items: flex-start;
    gap: 10px;
}
.ac-preview-twitter .ac-preview-name {
    color: rgba(255, 255, 255, 0.88);
    display: inline;
}
.ac-preview-twitter .ac-preview-handle {
    color: rgba(255, 255, 255, 0.35);
    display: inline;
    margin-left: 4px;
    font-size: 13px;
}
.ac-preview-twitter .ac-preview-meta {
    color: rgba(255, 255, 255, 0.35);
    display: inline;
}
.ac-preview-twitter .ac-preview-meta::before {
    content: '\00b7';
    margin: 0 4px;
}
.ac-preview-twitter .ac-preview-body {
    color: rgba(255, 255, 255, 0.85);
    margin-left: 46px;
    font-size: 14px;
}
.ac-preview-twitter .ac-preview-actions {
    margin-left: 46px;
    color: rgba(255, 255, 255, 0.35);
    gap: 40px;
    padding-top: 10px;
    font-size: 13px;
}

/* Thread — connected tweets */
.ac-preview-twitter .ac-thread-item {
    position: relative;
    padding-left: 46px;
    padding-bottom: 12px;
    margin-bottom: 8px;
}
.ac-preview-twitter .ac-thread-item::before {
    content: '';
    position: absolute;
    left: 17px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(255, 255, 255, 0.12);
}
.ac-preview-twitter .ac-thread-item:last-child::before {
    display: none;
}
.ac-preview-twitter .ac-thread-num {
    font-size: 10px;
    color: var(--ac-twitter);
    font-weight: 600;
    margin-bottom: 4px;
}

/* ─────────────────────────────────────
   3. Reddit Preview
   ───────────────────────────────────── */
.ac-preview-reddit {
    background: rgba(26, 26, 27, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    display: flex;
    padding: 0;
}
.ac-preview-reddit .ac-reddit-votes {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 6px;
    gap: 2px;
    flex-shrink: 0;
    min-width: 36px;
    background: rgba(255, 255, 255, 0.02);
}
.ac-preview-reddit .ac-reddit-arrow {
    font-size: 14px;
    cursor: default;
    color: rgba(255, 255, 255, 0.2);
    line-height: 1;
}
.ac-preview-reddit .ac-reddit-arrow.up:hover {
    color: var(--ac-reddit);
}
.ac-preview-reddit .ac-reddit-score {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.6);
}
.ac-preview-reddit .ac-reddit-main {
    flex: 1;
    padding: 10px 12px;
    min-width: 0;
}
.ac-preview-reddit .ac-preview-handle {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.35);
    margin-bottom: 4px;
}
.ac-preview-reddit .ac-preview-handle .ac-reddit-sub {
    color: rgba(255, 255, 255, 0.55);
    font-weight: 600;
}
.ac-preview-reddit .ac-preview-name {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.88);
    margin-bottom: 6px;
    line-height: 1.3;
}
.ac-preview-reddit .ac-preview-body {
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
}
.ac-preview-reddit .ac-preview-actions {
    border-top: none;
    padding-top: 6px;
    gap: 12px;
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.3);
}

/* ─────────────────────────────────────
   4. Instagram Preview
   ───────────────────────────────────── */
.ac-preview-instagram {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 0;
    overflow: hidden;
}
.ac-preview-instagram .ac-preview-header {
    padding: 10px 12px;
    margin-bottom: 0;
}
.ac-preview-instagram .ac-preview-avatar {
    width: 28px;
    height: 28px;
    background: linear-gradient(
        135deg,
        var(--ac-instagram-purple),
        var(--ac-instagram-pink),
        var(--ac-instagram-orange)
    );
    color: rgba(255, 255, 255, 0.95);
    font-size: 10px;
}
.ac-preview-instagram .ac-preview-name {
    color: rgba(255, 255, 255, 0.88);
    font-size: 12px;
}
.ac-preview-instagram .ac-insta-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: linear-gradient(
        135deg,
        rgba(131, 58, 180, 0.15),
        rgba(253, 89, 73, 0.1),
        rgba(225, 48, 108, 0.12)
    );
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.12);
    font-size: 28px;
}
.ac-preview-instagram .ac-insta-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 12px 4px;
    font-size: 18px;
    color: rgba(255, 255, 255, 0.75);
}
.ac-preview-instagram .ac-insta-actions .ac-insta-save {
    margin-left: auto;
}
.ac-preview-instagram .ac-insta-content {
    padding: 8px 12px;
}
.ac-preview-instagram .ac-insta-content .ac-preview-actions {
    padding: 4px 0 8px;
}
.ac-preview-instagram .ac-insta-likes {
    padding: 0 12px;
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 4px;
}
.ac-preview-instagram .ac-preview-body {
    padding: 0 12px 10px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
}
.ac-preview-instagram .ac-preview-body .ac-preview-name {
    display: inline;
    font-size: 12px;
    margin-right: 4px;
}

/* ─────────────────────────────────────
   5. Facebook Preview
   ───────────────────────────────────── */
.ac-preview-facebook {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}
.ac-preview-facebook .ac-preview-avatar {
    background: var(--ac-facebook);
    color: rgba(255, 255, 255, 0.95);
}
.ac-preview-facebook .ac-preview-name {
    color: rgba(255, 255, 255, 0.88);
}
.ac-preview-facebook .ac-preview-meta {
    display: block;
    margin-left: 0;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.35);
}
.ac-preview-facebook .ac-preview-body {
    color: rgba(255, 255, 255, 0.75);
    font-size: 14px;
    margin-bottom: 10px;
}
.ac-preview-facebook .ac-preview-actions {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    justify-content: space-around;
    padding-top: 10px;
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 600;
    font-size: 12px;
}

/* ─────────────────────────────────────
   6. XING Preview
   ───────────────────────────────────── */
.ac-preview-xing {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    border-top: 3px solid var(--ac-xing);
}
.ac-preview-xing .ac-preview-avatar {
    background: var(--ac-xing);
    color: rgba(255, 255, 255, 0.95);
    border-radius: 4px;
}
.ac-preview-xing .ac-preview-name {
    color: rgba(255, 255, 255, 0.88);
}
.ac-preview-xing .ac-preview-handle {
    color: rgba(255, 255, 255, 0.4);
    font-size: 11px;
}
.ac-preview-xing .ac-preview-body {
    color: rgba(255, 255, 255, 0.65);
}
.ac-preview-xing .ac-preview-actions {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.4);
    gap: 20px;
    padding-top: 10px;
    font-size: 11px;
    font-weight: 500;
}
.ac-preview-xing .ac-xing-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 6px;
    border-radius: 3px;
    background: rgba(0, 101, 103, 0.15);
    color: rgba(0, 180, 183, 0.8);
}

/* ═══════════════════════════════════════════════════
   SOUL TAB — Cards, Tags, Diffs, Edit
   ═══════════════════════════════════════════════════ */

.ac-soul-card { background: rgba(28,28,30,0.65); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 20px 24px; margin-bottom: 14px; backdrop-filter: blur(20px) saturate(150%); transition: all 0.3s; }
.ac-soul-card:hover { background: rgba(35,35,40,0.75); border-color: rgba(255,255,255,0.15); }
.ac-soul-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.ac-soul-card-title { font-size: 15px; font-weight: 600; }
.ac-soul-card-actions { display: flex; gap: 4px; }
.ac-soul-card-body { font-size: 13px; }
.ac-soul-btn { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; padding: 4px 8px; cursor: pointer; color: rgba(255,255,255,0.55); transition: all 0.2s; font-size: 12px; }
.ac-soul-btn:hover { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.92); }
.ac-soul-text { font-size: 13px; color: rgba(255,255,255,0.55); line-height: 1.6; }
.ac-soul-tag { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin: 2px 4px 2px 0; }
.ac-soul-tag.green { background: rgba(40,167,69,0.15); color: #48bb78; }
.ac-soul-tag.blue { background: rgba(0,122,255,0.12); color: #007AFF; }
.ac-soul-tag.purple { background: rgba(175,82,222,0.12); color: #AF52DE; }
.ac-soul-tag.yellow { background: rgba(251,191,36,0.12); color: #fbbf24; }
.ac-soul-tag.red { background: rgba(239,68,68,0.12); color: #ef4444; }
.ac-soul-tag.teal { background: rgba(20,184,166,0.12); color: #14B8A6; }
.ac-soul-quote { border-left: 3px solid #48bb78; padding: 10px 14px; background: rgba(40,167,69,0.08); border-radius: 0 8px 8px 0; margin: 8px 0; font-style: italic; font-size: 13px; line-height: 1.6; color: rgba(255,255,255,0.92); }
.ac-soul-stats { display: flex; gap: 16px; margin-top: 14px; }
.ac-soul-stat { text-align: center; flex: 1; padding: 12px; background: rgba(28,28,30,0.65); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; }
.ac-soul-stat-value { font-size: 28px; font-weight: 700; }
.ac-soul-stat-label { font-size: 11px; color: rgba(255,255,255,0.32); margin-top: 2px; }

/* Flow pattern */
.ac-soul-flow { display: flex; align-items: center; gap: 0; margin: 12px 0; }
.ac-soul-flow-step { background: rgba(28,28,30,0.65); border: 1px solid rgba(255,255,255,0.1); padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 500; }
.ac-soul-flow-arrow { color: #48bb78; font-size: 18px; margin: 0 8px; }

/* Compare (good/bad side by side) */
.ac-soul-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.ac-soul-compare-bad { padding: 12px; background: rgba(239,68,68,0.08); border-radius: 8px; }
.ac-soul-compare-good { padding: 12px; background: rgba(40,167,69,0.08); border-radius: 8px; }
.ac-soul-compare-label { font-size: 10px; font-weight: 600; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
.ac-soul-compare-item { font-size: 12px; color: rgba(255,255,255,0.55); padding: 2px 0; }

/* Formula */
.ac-soul-formula { margin: 10px 0; }
.ac-soul-formula-step { padding: 8px 12px; border-left: 3px solid; margin-bottom: 6px; border-radius: 0 8px 8px 0; font-size: 13px; color: rgba(255,255,255,0.55); }
.ac-soul-formula-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-right: 8px; }

/* Tables */
.ac-soul-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ac-soul-table th { text-align: left; font-size: 10px; color: rgba(255,255,255,0.32); text-transform: uppercase; letter-spacing: 0.5px; padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.ac-soul-table td { padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,0.04); color: rgba(255,255,255,0.55); }

/* Grids */
.ac-soul-mix-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ac-soul-mix-item { background: rgba(28,28,30,0.65); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 14px; }
.ac-soul-narrative-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.ac-soul-narrative-col, .ac-soul-persona-card { background: rgba(28,28,30,0.65); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 16px; }
.ac-soul-channel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ac-soul-channel-card { background: rgba(28,28,30,0.65); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 14px; }

/* Techniques */
.ac-soul-technique { padding: 14px; margin-bottom: 10px; background: rgba(28,28,30,0.4); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; }

/* Values */
.ac-soul-value-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; margin-bottom: 6px; background: rgba(28,28,30,0.65); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; }
.ac-soul-value-rank { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11px; color: #000; background: #48bb78; flex-shrink: 0; }
.ac-soul-value-name { font-weight: 600; font-size: 14px; min-width: 100px; }
.ac-soul-value-desc { font-size: 12px; color: rgba(255,255,255,0.32); }

/* Ratios */
.ac-soul-ratio-row { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.ac-soul-ratio-label { font-size: 12px; color: rgba(255,255,255,0.55); width: 160px; flex-shrink: 0; }
.ac-soul-ratio-bar { flex: 1; height: 8px; background: rgba(255,255,255,0.06); border-radius: 4px; overflow: hidden; }
.ac-soul-ratio-fill { height: 100%; background: #48bb78; border-radius: 4px; }
.ac-soul-ratio-value { font-size: 11px; color: rgba(255,255,255,0.32); width: 50px; text-align: right; }

/* ── Diff Panel (from Skill Optimizer pattern) ── */
.soul-diff-panel { margin-top: 12px; border-top: 1px solid rgba(255,255,255,0.06); padding-top: 12px; }
.soul-diff-versions { max-height: 500px; overflow-y: auto; }
.soul-version-card { padding: 10px 14px; margin-bottom: 6px; background: rgba(28,28,30,0.4); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; cursor: pointer; transition: all 0.2s; }
.soul-version-card:hover { border-color: rgba(255,255,255,0.15); background: rgba(35,35,40,0.6); }
.soul-version-card.latest { border-color: rgba(40,167,69,0.3); }
.soul-rollback-btn { background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.3); color: #ef4444; font-size: 11px; padding: 3px 10px; }
.soul-rollback-btn:hover { background: rgba(239,68,68,0.2); }

/* Side-by-side diff */
.diff-container { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-height: 400px; overflow-y: auto; margin-top: 8px; }
.diff-side { font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace; font-size: 11px; line-height: 1.5; padding: 10px; background: rgba(0,0,0,0.3); border-radius: 8px; overflow-x: auto; }
.diff-side-header { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: rgba(255,255,255,0.32); padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.diff-line-added { background: rgba(52,211,153,0.08); border-left: 2px solid #34d399; padding: 1px 8px; }
.diff-line-removed { background: rgba(239,68,68,0.08); border-left: 2px solid #f56565; padding: 1px 8px; }
.diff-line-unchanged { color: rgba(255,255,255,0.35); padding: 1px 8px; }

/* Edit panel */
.soul-edit-textarea { width: 100%; min-height: 200px; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; color: rgba(255,255,255,0.92); font-family: 'SF Mono', Monaco, monospace; font-size: 11px; line-height: 1.5; padding: 12px; resize: vertical; }

/* ═══════════════════════════════════════
   AutoCom Timeline — Centered Mindmap
   ═══════════════════════════════════════ */

/* Wrapper */
.tl-wrap { padding: 24px 0 40px; }
.tl-header { text-align: center; margin-bottom: 40px; padding: 0 24px; }
.tl-header h2 { font-size: 24px; font-weight: 800; letter-spacing: -0.5px; line-height: 1.25; margin-bottom: 8px; }
.tl-header h2 .hl { color: var(--accent, #48bb78); }
.tl-header p { font-size: 13px; color: rgba(255,255,255,0.45); max-width: 520px; margin: 0 auto; line-height: 1.55; }

/* The vertical center line */
.tl-line { position: relative; padding: 0 24px; }
.tl-line::before {
    content: ''; position: absolute;
    left: 50%; top: 0; bottom: 0; width: 2px;
    transform: translateX(-1px);
    background: linear-gradient(180deg, var(--accent, #48bb78) 0%, rgba(40,167,69,0.15) 100%);
    z-index: 0;
}

/* ── Month/Year Marker ── */
.tl-marker {
    position: relative; z-index: 3;
    display: flex; justify-content: center;
    margin: 32px 0 24px;
}
.tl-marker-label {
    display: inline-block; padding: 5px 18px;
    border-radius: 100px;
    background: rgba(10,10,12,0.95); border: 1px solid rgba(255,255,255,0.1);
    font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.5);
    letter-spacing: 0.5px;
}

/* ── Event Item ── */
.tl-item {
    position: relative; z-index: 2;
    width: 50%; margin-bottom: 28px;
    padding: 0 32px;
}

/* Left-side card */
.tl-item.tl-left {
    margin-left: 0; margin-right: auto;
    text-align: right;
}
.tl-item.tl-left .tl-content { display: flex; flex-direction: row-reverse; align-items: flex-start; gap: 10px; }
.tl-item.tl-left .tl-previews { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }

/* Right-side card */
.tl-item.tl-right {
    margin-left: auto; margin-right: 0;
    text-align: left;
}
.tl-item.tl-right .tl-content { display: flex; flex-direction: row; align-items: flex-start; gap: 10px; }
.tl-item.tl-right .tl-previews { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }

/* Node on the center line */
.tl-node {
    position: absolute; top: 20px;
    width: 14px; height: 14px; border-radius: 50%;
    background: #000; border: 2.5px solid var(--accent, #48bb78);
    z-index: 3;
}
.tl-item.tl-left .tl-node { right: -7px; }
.tl-item.tl-right .tl-node { left: -7px; }
.tl-item.bt .tl-node {
    width: 18px; height: 18px;
    background: var(--accent, #48bb78);
    box-shadow: 0 0 12px rgba(40,167,69,0.5);
}
.tl-item.bt.tl-left .tl-node { right: -9px; }
.tl-item.bt.tl-right .tl-node { left: -9px; }

/* Horizontal connector from card to node */
.tl-connector {
    position: absolute; top: 26px;
    height: 1px; width: 24px;
    background: rgba(40,167,69,0.3); z-index: 1;
}
.tl-item.tl-left .tl-connector { right: 7px; }
.tl-item.tl-right .tl-connector { left: 7px; }

/* ── Event Card ── */
.tl-card {
    flex: 1; min-width: 0;
    background: rgba(28,28,30,0.65); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px; padding: 14px 18px;
    backdrop-filter: blur(20px); transition: all 0.25s;
    text-align: left;
}
.tl-card:hover { background: rgba(35,35,40,0.75); border-color: rgba(255,255,255,0.14); }
.tl-item.bt .tl-card { border-color: rgba(40,167,69,0.2); box-shadow: 0 0 20px rgba(40,167,69,0.05); }

.tl-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.tl-card-icon {
    width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.tl-card-icon { background: rgba(255,255,255,0.04); }

.tl-card-meta { flex: 1; display: flex; align-items: center; gap: 8px; }
.tl-card-ver { font-size: 9px; color: rgba(255,255,255,0.28); font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; }
.tl-card-date { font-size: 9px; color: rgba(255,255,255,0.28); margin-left: auto; }

.tl-card-title { font-size: 14px; font-weight: 700; line-height: 1.35; letter-spacing: -0.2px; margin-bottom: 6px; }
.tl-card-body { font-size: 12px; color: rgba(255,255,255,0.48); line-height: 1.55; margin-bottom: 8px; }

.tl-punchline {
    border-left: 3px solid var(--accent, #48bb78); padding: 6px 10px;
    background: rgba(40,167,69,0.08); border-radius: 0 8px 8px 0;
    margin-bottom: 8px; font-size: 12px; font-weight: 600;
    color: rgba(255,255,255,0.85); line-height: 1.4;
}

/* Tags — monochrom, nur Accent als Highlight */
.tl-card-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.tl-tag {
    display: inline-block; padding: 2px 8px; border-radius: 100px;
    font-size: 9px; font-weight: 500; letter-spacing: 0.3px;
    background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.35);
    border: 1px solid rgba(255,255,255,0.06);
}
.tl-tag-green, .tl-tag-blue, .tl-tag-purple, .tl-tag-orange, .tl-tag-cyan, .tl-tag-pink {
    background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.35);
}

/* Badge (inline label, no card — !important to override inherited card styles) */
span.tl-badge {
    display: inline !important; margin-left: 6px;
    color: rgba(255,255,255,0.35) !important; font-size: 9px !important; font-weight: 500 !important;
    letter-spacing: 0.3px; vertical-align: middle;
    background: none !important; border: none !important; padding: 0 !important; border-radius: 0 !important;
    text-transform: none !important; box-shadow: none !important; backdrop-filter: none !important;
}

/* ── Platform Previews (Mindmap branches) ── */
.tl-previews { margin-top: 8px; }

/* ── Platform Mockups — visually match each platform ── */
.pv-mock {
    width: 160px; border-radius: 8px; overflow: hidden;
    transition: all 0.2s; text-align: left; margin-bottom: 6px;
}
.pv-mock:hover { transform: scale(1.02); }
.pv-mock-body {
    font-size: 9px; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── LinkedIn: Light card, blue accent ── */
.pv-linkedin {
    background: #1b1f23; border: 1px solid rgba(255,255,255,0.08);
}
.pv-linkedin .pv-li-head {
    display: flex; align-items: center; gap: 6px; padding: 6px 8px;
}
.pv-linkedin .pv-li-avatar {
    width: 18px; height: 18px; border-radius: 50%; background: #0A66C2;
    display: flex; align-items: center; justify-content: center;
    font-size: 8px; font-weight: 700; color: #fff; flex-shrink: 0;
}
.pv-linkedin .pv-li-info { font-size: 8px; }
.pv-linkedin .pv-li-name { font-weight: 700; color: rgba(255,255,255,0.7); }
.pv-linkedin .pv-li-role { color: rgba(255,255,255,0.25); font-size: 7px; }
.pv-linkedin .pv-mock-body { padding: 0 8px 6px; color: rgba(255,255,255,0.45); }
.pv-linkedin .pv-li-engage {
    display: flex; gap: 12px; padding: 5px 8px;
    border-top: 1px solid rgba(255,255,255,0.06);
    font-size: 7px; color: rgba(255,255,255,0.2);
}

/* ── Twitter/X: Dark, minimal ── */
.pv-twitter {
    background: #16181c; border: 1px solid rgba(255,255,255,0.08);
}
.pv-twitter .pv-tw-head {
    display: flex; align-items: center; gap: 6px; padding: 6px 8px;
}
.pv-twitter .pv-tw-avatar {
    width: 16px; height: 16px; border-radius: 50%; background: rgba(255,255,255,0.1);
    flex-shrink: 0;
}
.pv-twitter .pv-tw-name { font-size: 8px; font-weight: 700; color: rgba(255,255,255,0.6); }
.pv-twitter .pv-tw-handle { font-size: 7px; color: rgba(255,255,255,0.2); margin-left: 3px; }
.pv-twitter .pv-mock-body { padding: 0 8px 6px; color: rgba(255,255,255,0.45); }
.pv-twitter .pv-tw-engage {
    display: flex; gap: 16px; padding: 5px 8px;
    border-top: 1px solid rgba(255,255,255,0.05);
    font-size: 7px; color: rgba(255,255,255,0.15);
}

/* ── Reddit: Upvote + subreddit ── */
.pv-reddit {
    background: #1a1a1b; border: 1px solid rgba(255,255,255,0.08);
    display: flex;
}
.pv-reddit .pv-rd-votes {
    display: flex; flex-direction: column; align-items: center;
    padding: 6px 4px; gap: 2px; flex-shrink: 0;
}
.pv-reddit .pv-rd-arrow { font-size: 8px; color: rgba(255,255,255,0.15); }
.pv-reddit .pv-rd-arrow.up { color: rgba(255,69,0,0.5); }
.pv-reddit .pv-rd-score { font-size: 8px; font-weight: 700; color: rgba(255,255,255,0.3); }
.pv-reddit .pv-rd-content { padding: 6px 6px 6px 2px; flex: 1; min-width: 0; }
.pv-reddit .pv-rd-sub { font-size: 7px; color: rgba(255,255,255,0.25); margin-bottom: 3px; }
.pv-reddit .pv-mock-body { padding: 0; color: rgba(255,255,255,0.45); }
.pv-reddit .pv-rd-meta { font-size: 7px; color: rgba(255,255,255,0.15); margin-top: 4px; }

/* ── Newsletter: Email style ── */
.pv-newsletter {
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
}
.pv-newsletter .pv-nl-head {
    display: flex; align-items: center; gap: 5px;
    padding: 5px 8px; border-bottom: 1px solid rgba(255,255,255,0.04);
    font-size: 7px; color: rgba(255,255,255,0.25);
}
.pv-newsletter .pv-nl-subject {
    padding: 5px 8px 2px; font-size: 9px; font-weight: 600;
    color: rgba(255,255,255,0.5);
}
.pv-newsletter .pv-mock-body { padding: 2px 8px 6px; color: rgba(255,255,255,0.3); }

/* ── XING: Professional, green hint ── */
.pv-xing {
    background: #1b1f23; border: 1px solid rgba(255,255,255,0.08);
    border-top: 2px solid rgba(0,100,97,0.4);
}
.pv-xing .pv-xing-head {
    display: flex; align-items: center; gap: 5px;
    padding: 5px 8px; font-size: 8px; color: rgba(255,255,255,0.3);
}
.pv-xing .pv-xing-name { font-weight: 700; color: rgba(255,255,255,0.5); }
.pv-xing .pv-mock-body { padding: 0 8px 6px; color: rgba(255,255,255,0.4); }

/* ── Press Release: Formal ── */
.pv-press {
    background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06);
}
.pv-press .pv-pr-head {
    padding: 5px 8px; font-size: 7px; color: rgba(255,255,255,0.2);
    text-transform: uppercase; letter-spacing: 1px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.pv-press .pv-pr-title {
    padding: 5px 8px 2px; font-size: 9px; font-weight: 700;
    color: rgba(255,255,255,0.5);
}
.pv-press .pv-mock-body { padding: 2px 8px 6px; color: rgba(255,255,255,0.3); font-style: italic; }

/* ── Medium: Clean article style ── */
.pv-medium {
    background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06);
}
.pv-medium .pv-md-head {
    display: flex; align-items: center; gap: 5px;
    padding: 5px 8px; font-size: 7px; color: rgba(255,255,255,0.2);
}
.pv-medium .pv-md-title {
    padding: 4px 8px 2px; font-size: 9px; font-weight: 700;
    color: rgba(255,255,255,0.5); letter-spacing: -0.2px;
}
.pv-medium .pv-mock-body { padding: 2px 8px 6px; color: rgba(255,255,255,0.3); }
.pv-medium .pv-md-read { padding: 3px 8px 5px; font-size: 7px; color: rgba(255,255,255,0.15); }

/* ── Podcast: Audio player style ── */
.pv-podcast {
    background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06);
}
.pv-podcast .pv-pod-head {
    display: flex; align-items: center; gap: 5px;
    padding: 5px 8px; font-size: 7px; color: rgba(255,255,255,0.2);
}
.pv-podcast .pv-pod-title {
    padding: 4px 8px 2px; font-size: 9px; font-weight: 600;
    color: rgba(255,255,255,0.45);
}
.pv-podcast .pv-pod-player {
    padding: 4px 8px 6px; display: flex; align-items: center; gap: 6px;
}
.pv-pod-play {
    width: 14px; height: 14px; border-radius: 50%;
    background: rgba(255,255,255,0.08); display: flex;
    align-items: center; justify-content: center;
    font-size: 6px; color: rgba(255,255,255,0.3); flex-shrink: 0;
}
.pv-pod-wave {
    flex: 1; height: 6px; border-radius: 3px;
    background: rgba(255,255,255,0.06);
    position: relative; overflow: hidden;
}
.pv-pod-wave::after {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0;
    width: 35%; background: rgba(255,255,255,0.12); border-radius: 3px;
}
.pv-pod-dur { font-size: 7px; color: rgba(255,255,255,0.15); flex-shrink: 0; }

.ac-preview-empty {
    width: 150px; padding: 8px;
    border: 1px dashed rgba(255,255,255,0.04); border-radius: 8px;
    text-align: center; font-size: 9px; color: rgba(255,255,255,0.1);
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .tl-item { width: 90%; margin-left: 10% !important; margin-right: 0 !important; text-align: left !important; }
    .tl-item .tl-content { flex-direction: column !important; }
    .tl-item .tl-previews { flex-direction: row; flex-wrap: wrap; }
    .tl-line::before { left: 5%; }
    .tl-node { left: -7px !important; right: auto !important; }
    .tl-connector { left: 7px !important; right: auto !important; }
}

/* ── AutoCom Utility Classes ── */
.ac-icon-lg { width: 32px; height: 32px; color: var(--text-tertiary); }
.ac-icon-md { width: 16px; height: 16px; }
.ac-icon-sm { width: 14px; height: 14px; }
.ac-icon-xs { width: 12px; height: 12px; }
.ac-text-accent { color: var(--ac-accent); }
.ac-text-error { color: var(--ac-error); }
.ac-hidden { display: none; }