/* Claude Agent Dashboard — Command Center */
/* Mobile-first responsive design */

:root {
    --bg-primary: #0d1117;
    --bg-secondary: #161b22;
    --bg-tertiary: #21262d;
    --bg-card: #161b22;
    --border-color: #30363d;
    --text-primary: #e6edf3;
    --text-secondary: #8b949e;
    --text-muted: #484f58;
    --accent-blue: #58a6ff;
    --accent-green: #3fb950;
    --accent-orange: #d29922;
    --accent-red: #f85149;
    --accent-purple: #a371f7;
    --accent-yellow: #e3b341;
    --sidebar-width: 48px;
    --sidebar-expanded: 200px;
    --bottom-bar-height: 56px;
    --transition: 0.2s ease;
}

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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    overflow: hidden;
}

.hidden { display: none !important; }

/* =========================================
   Layout: #app = sidebar + content
   ========================================= */
#app {
    display: flex;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

#content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px;
    -webkit-overflow-scrolling: touch;
}

/* =========================================
   Sidebar (desktop)
   ========================================= */
#sidebar {
    width: var(--sidebar-width);
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    transition: width var(--transition);
    overflow: hidden;
    flex-shrink: 0;
    z-index: 100;
}

#sidebar:hover {
    width: var(--sidebar-expanded);
}

#sidebar .nav-brand {
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
    min-height: 48px;
}

#sidebar .nav-brand .brand-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

#sidebar .nav-brand .brand-text {
    font-size: 14px;
    font-weight: 600;
    opacity: 0;
    transition: opacity var(--transition);
}

#sidebar:hover .nav-brand .brand-text { opacity: 1; }

.nav-items {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 8px 0;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all var(--transition);
    white-space: nowrap;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    font-size: 13px;
}

.nav-item:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.nav-item.active {
    color: var(--accent-blue);
    background: rgba(88, 166, 255, 0.08);
}

.nav-item .nav-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.nav-item .nav-label {
    opacity: 0;
    transition: opacity var(--transition);
}

#sidebar:hover .nav-item .nav-label { opacity: 1; }

.nav-footer {
    border-top: 1px solid var(--border-color);
    padding: 8px 0;
}

/* Status dot in sidebar */
.nav-status {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-left: auto;
    opacity: 0;
    transition: opacity var(--transition);
}
#sidebar:hover .nav-status { opacity: 1; }
.nav-status.online { background: var(--accent-green); }
.nav-status.offline { background: var(--accent-red); }

/* =========================================
   View Header
   ========================================= */
.view-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.view-header h1 {
    font-size: 20px;
    font-weight: 600;
}

.view-header .header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.view-subtitle {
    color: var(--text-secondary);
    font-size: 13px;
    margin-top: 2px;
}

/* =========================================
   Cards
   ========================================= */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.card-title {
    font-size: 14px;
    font-weight: 600;
}

.card-value {
    font-size: 24px;
    font-weight: 700;
}

.card-meta {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* Card grid */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

/* Stat card (compact) */
.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 14px;
    cursor: pointer;
    transition: border-color var(--transition);
}

.stat-card:hover {
    border-color: var(--accent-blue);
}

.stat-card .stat-label {
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.stat-card .stat-value {
    font-size: 20px;
    font-weight: 700;
}

.stat-card .stat-sub {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 2px;
}

/* =========================================
   Briefing (Home) specific
   ========================================= */
.briefing-section {
    margin-bottom: 24px;
}

.briefing-section h2 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 11px;
}

.overnight-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
    border-left: 3px solid var(--accent-purple);
}

.overnight-card .overnight-date {
    font-size: 12px;
    color: var(--accent-purple);
    margin-bottom: 4px;
}

.overnight-card .overnight-summary {
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-primary);
}

/* Rich overnight briefing */
.briefing-overnight-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 4px;
}
.briefing-overnight-header h2 { margin: 0; }
.briefing-stats-line {
    font-size: 13px;
    color: var(--text-muted);
    white-space: nowrap;
}
.overnight-briefing-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px 20px;
    border-left: 3px solid var(--accent-purple);
}
.briefing-sub {
    margin-bottom: 14px;
}
.briefing-sub:last-child { margin-bottom: 0; }
.briefing-sub-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.briefing-built-item,
.briefing-thread-item {
    font-size: 14px;
    line-height: 1.6;
    padding: 2px 0 2px 12px;
    border-left: 2px solid transparent;
}
.briefing-built-item:hover,
.briefing-thread-item:hover {
    border-left-color: var(--accent-purple);
}
.briefing-name {
    font-weight: 600;
    color: var(--text-primary);
}
.briefing-stage {
    font-size: 12px;
    color: var(--accent-blue);
}
.briefing-desc {
    color: var(--text-secondary);
    font-size: 13px;
}
ol.briefing-actions {
    margin: 0;
    padding-left: 20px;
}
ol.briefing-actions li {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-primary);
    padding: 1px 0;
}
.briefing-footer {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
    text-align: right;
}
.briefing-link {
    font-size: 13px;
    color: var(--accent-purple);
    text-decoration: none;
    font-weight: 500;
}
.briefing-link:hover {
    text-decoration: underline;
}

.service-dots {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.service-dot {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    font-size: 12px;
    cursor: pointer;
}

.service-dot .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.service-dot .dot.active { background: var(--accent-green); }
.service-dot .dot.inactive { background: var(--accent-red); }
.service-dot .dot.unknown { background: var(--text-muted); }

.quick-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.quick-action {
    padding: 8px 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 13px;
    transition: all var(--transition);
}

.quick-action:hover {
    border-color: var(--accent-blue);
    background: rgba(88, 166, 255, 0.08);
}
.quick-action.qa-sell {
    border-color: rgba(245, 158, 11, 0.3);
    color: #f59e0b;
}
.quick-action.qa-sell:hover {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
}

/* =========================================
   Tasks View
   ========================================= */
.filter-pills {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.filter-pill {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    cursor: pointer;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    transition: all var(--transition);
}

.filter-pill:hover {
    color: var(--text-primary);
}

.filter-pill.active {
    background: var(--accent-blue);
    color: white;
    border-color: var(--accent-blue);
}

.task-group {
    margin-bottom: 24px;
}

.task-group-header {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.task-group-count {
    background: var(--bg-tertiary);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
}

.task-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 14px;
    margin-bottom: 8px;
    transition: border-color var(--transition);
}

.task-card:hover {
    border-color: var(--text-muted);
}

.task-card-top {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 6px;
}

.priority-badge {
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

.priority-badge.low { background: rgba(63, 185, 80, 0.15); color: var(--accent-green); }
.priority-badge.med { background: rgba(210, 153, 34, 0.15); color: var(--accent-orange); }
.priority-badge.high { background: rgba(248, 81, 73, 0.15); color: var(--accent-red); }

.effort-badge {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    flex-shrink: 0;
    margin-left: auto;
}

.task-title {
    font-size: 14px;
    font-weight: 500;
    flex: 1;
}

.task-context {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.task-context.expanded {
    -webkit-line-clamp: unset;
}

.task-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.task-btn {
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    transition: all var(--transition);
}

.task-btn:hover { color: var(--text-primary); border-color: var(--text-muted); }
.task-btn.primary { background: var(--accent-blue); color: white; border-color: var(--accent-blue); }
.task-btn.primary:hover { opacity: 0.9; }
.task-btn.success { background: var(--accent-green); color: white; border-color: var(--accent-green); }
.task-btn.danger { color: var(--accent-red); border-color: var(--accent-red); }
.task-btn.danger:hover { background: rgba(248, 81, 73, 0.15); }

.blocked-reason {
    font-size: 12px;
    color: var(--accent-orange);
    margin-bottom: 8px;
    padding: 4px 8px;
    background: rgba(210, 153, 34, 0.08);
    border-radius: 4px;
}

/* =========================================
   Logs View
   ========================================= */
.log-controls {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.date-nav {
    display: flex;
    align-items: center;
    gap: 4px;
}

.date-nav button {
    padding: 4px 8px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.date-nav button:hover { background: var(--border-color); }

.date-nav .current-date {
    padding: 4px 12px;
    font-size: 13px;
    font-weight: 500;
    min-width: 110px;
    text-align: center;
}

.log-search {
    flex: 1;
    min-width: 150px;
    max-width: 300px;
    padding: 6px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 13px;
}

.log-search:focus { outline: none; border-color: var(--accent-blue); }

.source-selector {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.log-entry {
    display: flex;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(48, 54, 61, 0.4);
    font-size: 13px;
    line-height: 1.4;
}

.log-entry:last-child { border-bottom: none; }

.log-time {
    color: var(--text-muted);
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 12px;
    flex-shrink: 0;
    min-width: 42px;
}

.log-tag {
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 500;
    flex-shrink: 0;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.log-message { flex: 1; word-break: break-word; }

.log-entry.severity-error .log-tag { background: rgba(248, 81, 73, 0.15); color: var(--accent-red); }
.log-entry.severity-warning .log-tag { background: rgba(210, 153, 34, 0.15); color: var(--accent-orange); }
.log-entry.severity-success .log-tag { background: rgba(63, 185, 80, 0.15); color: var(--accent-green); }

.log-highlight { background: rgba(227, 179, 65, 0.2); padding: 0 2px; border-radius: 2px; }

.system-log-viewer {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px;
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 12px;
    line-height: 1.5;
    max-height: 60vh;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-all;
}

/* =========================================
   Overnight View
   ========================================= */
.report-timeline {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.report-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all var(--transition);
}

.report-item:hover { border-color: var(--accent-purple); }
.report-item.active { border-color: var(--accent-purple); background: rgba(163, 113, 247, 0.08); }

.report-date {
    font-weight: 600;
    font-size: 14px;
    min-width: 90px;
}

.report-badge {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

.report-badge.ok { background: rgba(63, 185, 80, 0.15); color: var(--accent-green); }
.report-badge.error { background: rgba(248, 81, 73, 0.15); color: var(--accent-red); }

.report-preview {
    font-size: 12px;
    color: var(--text-secondary);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.report-content {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
}

.report-content .md-content {
    font-size: 14px;
    line-height: 1.6;
}

.report-toggle {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
}

.report-toggle button {
    padding: 6px 14px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}

.report-toggle button.active {
    background: var(--accent-purple);
    color: white;
    border-color: var(--accent-purple);
}

/* =========================================
   Assets View
   ========================================= */
.asset-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}

.asset-item {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color var(--transition);
}

.asset-item:hover { border-color: var(--accent-blue); }

.asset-thumb {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 32px;
}

.asset-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.asset-info {
    padding: 8px;
}

.asset-name {
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.asset-size {
    font-size: 11px;
    color: var(--text-secondary);
}

.upload-zone {
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    padding: 32px;
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: 16px;
    cursor: pointer;
    transition: all var(--transition);
}

.upload-zone:hover, .upload-zone.drag-over {
    border-color: var(--accent-blue);
    background: rgba(88, 166, 255, 0.05);
}

/* Lightbox */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.lightbox img {
    max-width: 90vw;
    max-height: 80vh;
    object-fit: contain;
}

.lightbox-controls {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--bg-tertiary);
    border: none;
    color: var(--text-primary);
    font-size: 24px;
    padding: 12px;
    cursor: pointer;
    border-radius: 50%;
}

.lightbox-nav.prev { left: 16px; }
.lightbox-nav.next { right: 16px; }

.lightbox-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 28px;
    cursor: pointer;
}

/* =========================================
   File Viewer Overlay
   ========================================= */
.file-viewer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.file-viewer {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.file-viewer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.file-viewer-header h3 {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-viewer-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

.file-viewer-body {
    flex: 1;
    overflow: auto;
    min-height: 0;
}

.file-viewer-iframe {
    width: 100%;
    height: 75vh;
    border: none;
    background: white;
}

.file-viewer-text {
    padding: 20px;
    line-height: 1.6;
}

.file-viewer-text .md-content h1 { font-size: 22px; margin: 20px 0 10px; }
.file-viewer-text .md-content h2 { font-size: 18px; margin: 18px 0 8px; color: var(--accent-primary); }
.file-viewer-text .md-content h3 { font-size: 15px; margin: 14px 0 6px; }
.file-viewer-text .md-content p { margin: 6px 0; }
.file-viewer-text .md-content pre {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 12px;
    overflow-x: auto;
    font-size: 12px;
}
.file-viewer-text .md-content code {
    background: var(--bg-tertiary);
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 12px;
}
.file-viewer-text .md-content ul { padding-left: 20px; }
.file-viewer-text .md-content li { margin: 3px 0; }
.file-viewer-text .md-content blockquote {
    border-left: 3px solid var(--accent-primary);
    padding-left: 12px;
    color: var(--text-secondary);
    margin: 8px 0;
}
.file-viewer-text .md-content hr {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 16px 0;
}

.file-viewer-code {
    font-size: 12px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
    margin: 0;
    color: var(--text-primary);
}

.file-icon-large {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 18px;
    font-weight: 700;
    font-family: var(--font-mono);
}

.asset-item.clickable { cursor: pointer; }
.asset-item.clickable:hover .asset-thumb {
    border-color: var(--accent-primary);
}

.file-viewer-full {
    max-width: 95vw;
    width: 95vw;
    height: 90vh;
    max-height: 90vh;
}

/* =========================================
   PDFs View
   ========================================= */
.pdf-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pdf-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s;
}

.pdf-item:hover {
    border-color: var(--accent-primary);
}

.pdf-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(231, 76, 60, 0.12);
    color: #e74c3c;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    font-family: var(--font-mono);
}

.pdf-info {
    flex: 1;
    min-width: 0;
}

.pdf-name {
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pdf-meta {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.pdf-actions {
    flex-shrink: 0;
}

.btn-sm {
    padding: 4px 10px;
    font-size: 12px;
}

/* =========================================
   System View
   ========================================= */
.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}

.service-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 14px;
}

.service-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.service-name {
    font-weight: 600;
    font-size: 14px;
}

.service-status {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

.service-status.active { background: rgba(63, 185, 80, 0.15); color: var(--accent-green); }
.service-status.inactive { background: rgba(248, 81, 73, 0.15); color: var(--accent-red); }
.service-status.unknown { background: var(--bg-tertiary); color: var(--text-muted); }

.service-since {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.doc-viewer {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 16px;
}

.doc-viewer .md-content {
    font-size: 14px;
    line-height: 1.6;
}

/* =========================================
   Claude live session view
   ========================================= */
.claude-view {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 20px);
    padding: 0;
}

.claude-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    font-size: 13px;
    color: var(--text-secondary);
}

.claude-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #666;
    flex-shrink: 0;
}

.claude-dot.active {
    background: #22c55e;
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
}

.claude-terminal-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.claude-terminal-frame {
    flex: 1;
    min-height: 0;
}

.claude-input-bar {
    display: flex;
    gap: 8px;
    padding: 10px 16px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
}

#claude-input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-size: 14px;
}

#claude-input:focus { outline: none; border-color: var(--accent-blue); }

/* =========================================
   Modal
   ========================================= */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.modal {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    width: 100%;
    max-width: 500px;
    max-height: 80vh;
    overflow-y: auto;
}

.modal.modal-wide {
    max-width: 720px;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
}

.modal-header h2 { font-size: 16px; font-weight: 600; }

.modal-body { padding: 20px; }
.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid var(--border-color);
}

/* =========================================
   Toast
   ========================================= */
#toast-container {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 700;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.toast {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 13px;
    max-width: 360px;
    pointer-events: auto;
    animation: slideIn 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.toast.success { border-left: 3px solid var(--accent-green); }
.toast.error { border-left: 3px solid var(--accent-red); }
.toast.info { border-left: 3px solid var(--accent-blue); }
.toast.warning { border-left: 3px solid var(--accent-orange); }

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slideOut {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100%); opacity: 0; }
}

/* =========================================
   Command Bar
   ========================================= */
.command-bar {
    position: fixed;
    inset: 0;
    z-index: 800;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 20vh;
    background: rgba(0, 0, 0, 0.5);
}

.command-bar-inner {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    width: 100%;
    max-width: 560px;
    overflow: hidden;
}

#command-input {
    width: 100%;
    padding: 14px 20px;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 16px;
}

#command-input:focus { outline: none; }

.command-results {
    max-height: 400px;
    overflow-y: auto;
}

.command-result {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 14px;
}

.command-result:hover, .command-result.selected {
    background: var(--bg-tertiary);
}

.command-result-type {
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    flex-shrink: 0;
}

.command-result-title { flex: 1; }

/* =========================================
   Buttons
   ========================================= */
.btn-primary {
    padding: 8px 16px;
    background: var(--accent-blue);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    font-size: 13px;
    transition: opacity var(--transition);
}

.btn-primary:hover { opacity: 0.9; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-secondary {
    padding: 8px 16px;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    transition: all var(--transition);
}

.btn-secondary:hover { border-color: var(--text-muted); }

.btn-icon {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 20px;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-icon:hover { color: var(--text-primary); }

.btn-small {
    padding: 4px 10px;
    font-size: 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    border-radius: 4px;
    cursor: pointer;
}

.btn-small:hover { background: var(--border-color); }

/* =========================================
   Forms
   ========================================= */
.form-group {
    margin-bottom: 14px;
}

.form-group label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.form-input, .form-select, .form-textarea {
    width: 100%;
    padding: 8px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 14px;
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
    outline: none;
    border-color: var(--accent-blue);
}

.form-textarea { resize: vertical; min-height: 80px; }
.form-select { cursor: pointer; }

/* =========================================
   Markdown rendered content
   ========================================= */
.md-content h1 { font-size: 20px; font-weight: 700; margin: 16px 0 8px; }
.md-content h2 { font-size: 17px; font-weight: 600; margin: 14px 0 6px; }
.md-content h3 { font-size: 15px; font-weight: 600; margin: 12px 0 4px; }
.md-content p { margin-bottom: 8px; }
.md-content ul, .md-content ol { padding-left: 20px; margin-bottom: 8px; }
.md-content li { margin-bottom: 4px; }
.md-content code {
    background: var(--bg-tertiary);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 0.9em;
}
.md-content pre {
    background: var(--bg-tertiary);
    padding: 12px;
    border-radius: 6px;
    overflow-x: auto;
    margin-bottom: 8px;
}
.md-content pre code {
    background: none;
    padding: 0;
}
.md-content blockquote {
    border-left: 3px solid var(--accent-purple);
    padding-left: 12px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}
.md-content a { color: var(--accent-blue); text-decoration: none; }
.md-content a:hover { text-decoration: underline; }
.md-content hr { border: none; border-top: 1px solid var(--border-color); margin: 12px 0; }
.md-content strong { font-weight: 600; }
.md-content em { font-style: italic; }

/* =========================================
   Loading / Empty states
   ========================================= */
.loading {
    color: var(--text-secondary);
    text-align: center;
    padding: 40px 20px;
}

.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-secondary);
}

.empty-state .empty-icon {
    font-size: 36px;
    margin-bottom: 12px;
}

.empty-state .empty-text {
    font-size: 14px;
    margin-bottom: 8px;
}

/* =========================================
   Scrollbar
   ========================================= */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* =========================================
   Review items (in tasks view)
   ========================================= */
.review-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--accent-orange);
    border-radius: 8px;
    padding: 14px;
    margin-bottom: 8px;
}

.review-card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--accent-orange);
    margin-bottom: 6px;
}

.review-card-detail {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

/* =========================================
   Mobile (< 768px)
   ========================================= */
@media (max-width: 768px) {
    #app {
        flex-direction: column;
    }

    #sidebar {
        order: 2;
        width: 100% !important;
        height: var(--bottom-bar-height);
        flex-direction: row;
        border-right: none;
        border-top: 1px solid var(--border-color);
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
    }

    #sidebar .nav-brand { display: none; }
    #sidebar .nav-footer { display: none; }

    .nav-items {
        flex-direction: row;
        justify-content: space-around;
        padding: 0;
        width: 100%;
    }

    .nav-item {
        flex-direction: column;
        gap: 2px;
        padding: 6px 4px;
        align-items: center;
        justify-content: center;
        font-size: 10px;
    }

    .nav-item .nav-icon { font-size: 20px; }
    .nav-item .nav-label { opacity: 1; font-size: 10px; }
    .nav-item .nav-status { display: none; }

    #content {
        order: 1;
        padding-bottom: calc(var(--bottom-bar-height) + 16px);
        padding: 12px;
        padding-bottom: calc(var(--bottom-bar-height) + 12px);
    }

    .card-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .view-header h1 { font-size: 18px; }

    .command-bar { padding-top: 10vh; padding: 10vh 12px 0; }

    .modal { max-width: 100%; }

    .asset-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }

    .service-grid {
        grid-template-columns: 1fr;
    }

    .report-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .report-preview { white-space: normal; }

    /* Hide desktop-only items on mobile */
    .desktop-only { display: none !important; }
}

/* Tablet (768-1024) */
@media (min-width: 769px) and (max-width: 1024px) {
    .card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop */
@media (min-width: 769px) {
    .mobile-only { display: none !important; }

    #content {
        padding: 24px 32px;
    }
}

/* Large desktop */
@media (min-width: 1400px) {
    #content {
        max-width: 1200px;
    }
}

/* =========================================================================
   Live Overnight Monitor
   ========================================================================= */

.live-banner {
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
}

.live-status {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.live-meta {
    color: var(--text-secondary);
    font-size: 12px;
}

.live-pulse {
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
    50% { opacity: 0.7; box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
}

.live-section {
    margin-bottom: 20px;
}

.live-section h3 {
    font-size: 13px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.live-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
}

.live-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px;
}

.live-card-title {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 6px;
    color: var(--text-primary);
}

.live-card-meta {
    display: flex;
    gap: 10px;
    font-size: 11px;
    color: var(--text-secondary);
}

.thread-stage {
    background: var(--bg-tertiary);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10px;
    color: var(--accent-blue);
}

.live-list {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.live-list-item {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color);
    font-size: 12px;
    display: flex;
    gap: 12px;
    align-items: center;
}

.live-list-item:last-child {
    border-bottom: none;
}

.live-list-item code {
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 12px;
    color: var(--text-primary);
}

.file-time {
    color: var(--text-muted);
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 11px;
    min-width: 65px;
}

.file-path {
    color: var(--text-primary);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-size {
    color: var(--text-muted);
    font-size: 11px;
    min-width: 50px;
    text-align: right;
}

.live-log {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px;
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 11px;
    line-height: 1.5;
    max-height: 300px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--text-secondary);
}

.live-report-preview {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
    font-size: 13px;
}

/* Split layout: monitor left, terminal right */
.overnight-split {
    display: flex;
    gap: 16px;
    height: calc(100vh - 120px);
    min-height: 500px;
}

.overnight-monitor {
    width: 340px;
    min-width: 280px;
    overflow-y: auto;
    flex-shrink: 0;
}

.overnight-terminal {
    flex: 1;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    background: #000;
}

.terminal-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
}

.terminal-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.terminal-dot.red { background: #ff5f56; }
.terminal-dot.yellow { background: #ffbd2e; }
.terminal-dot.green { background: #27c93f; }

.terminal-title {
    font-size: 12px;
    color: var(--text-secondary);
    margin-left: 6px;
    flex: 1;
}

.terminal-expand {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
    padding: 2px 6px;
    border-radius: 4px;
}
.terminal-expand:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.terminal-frame {
    flex: 1;
    width: 100%;
    border: none;
    background: #000;
}

/* Compact thread rows for monitor panel */
.live-thread-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    font-size: 12px;
    border-bottom: 1px solid var(--border-color);
}
.live-thread-row:last-child { border-bottom: none; }

.live-thread-name {
    flex: 1;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.live-thread-time {
    color: var(--text-muted);
    font-size: 11px;
    font-family: 'Monaco', 'Menlo', monospace;
}

.live-commit {
    padding: 4px 0;
    font-size: 12px;
}

.live-file-row {
    display: flex;
    gap: 8px;
    padding: 3px 0;
    font-size: 11px;
    border-bottom: 1px solid rgba(48,54,61,0.5);
}
.live-file-row:last-child { border-bottom: none; }

/* Mobile: stack vertically */
@media (max-width: 900px) {
    .overnight-split {
        flex-direction: column;
        height: auto;
    }
    .overnight-monitor {
        width: 100%;
        max-height: 300px;
    }
    .overnight-terminal {
        height: 60vh;
        min-height: 400px;
    }
}

/* ============================================================
   Content Queue Styles
   ============================================================ */

.content-queue h2 {
    margin-bottom: 16px;
    font-size: 1.4rem;
}

.content-stats {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.stat-pill {
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 0.8rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: var(--transition);
}

.stat-pill:hover {
    border-color: var(--accent-blue);
}

.content-filters {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
}

.filter-btn {
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.8rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition);
}

.filter-btn.active,
.filter-btn:hover {
    background: var(--accent-blue);
    color: #fff;
    border-color: var(--accent-blue);
}

.batch-actions {
    margin-bottom: 16px;
    padding: 10px;
    background: var(--bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.batch-actions strong {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.btn-approve-batch {
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid var(--accent-green);
    color: var(--accent-green);
    cursor: pointer;
    transition: var(--transition);
}

.btn-approve-batch:hover {
    background: var(--accent-green);
    color: #fff;
}

.bulk-actions {
    display: flex;
    gap: 10px;
    margin: 10px 0;
    flex-wrap: wrap;
}

.btn-bulk {
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
    transition: var(--transition);
}

.btn-approve-all {
    background: rgba(63, 185, 80, 0.15);
    color: var(--accent-green);
    border: 1px solid rgba(63, 185, 80, 0.3);
}

.btn-approve-all:hover {
    background: var(--accent-green);
    color: #fff;
}

.btn-schedule-all {
    background: rgba(88, 166, 255, 0.15);
    color: var(--accent-blue);
    border: 1px solid rgba(88, 166, 255, 0.3);
}

.btn-schedule-all:hover {
    background: var(--accent-blue);
    color: #fff;
}

.content-schedule-info {
    font-size: 0.75rem;
    color: var(--accent-blue);
    padding: 4px 0;
}

.btn-schedule {
    background: rgba(88, 166, 255, 0.15) !important;
    color: var(--accent-blue) !important;
    border: 1px solid rgba(88, 166, 255, 0.3) !important;
}

.btn-schedule:hover {
    background: var(--accent-blue) !important;
    color: #fff !important;
}

.stat-pill.scheduled {
    background: rgba(88, 166, 255, 0.15);
    color: var(--accent-blue);
}

.content-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.content-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 14px;
    transition: var(--transition);
}

.content-card:hover {
    border-color: var(--accent-blue);
}

.content-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.platform-icon {
    font-size: 1.2rem;
}

.content-title {
    font-weight: 600;
    font-size: 0.9rem;
    flex: 1;
}

.badge {
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.content-batch {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.content-body {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-secondary);
    margin-bottom: 8px;
    padding: 10px;
    background: var(--bg-primary);
    border-radius: 6px;
    max-height: 200px;
    overflow-y: auto;
}

.content-hashtags {
    font-size: 0.8rem;
    color: var(--accent-blue);
    margin-bottom: 8px;
}

.content-card-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.btn-sm {
    padding: 4px 10px;
    border-radius: 5px;
    font-size: 0.75rem;
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition);
}

.btn-sm:hover {
    border-color: var(--accent-blue);
    color: var(--text-primary);
}

.btn-approve { border-color: var(--accent-green); color: var(--accent-green); }
.btn-approve:hover { background: var(--accent-green); color: #fff; }
.btn-delete { border-color: var(--accent-red); color: var(--accent-red); }
.btn-delete:hover { background: var(--accent-red); color: #fff; }

/* View toggle */
.view-toggle {
    display: flex;
    gap: 4px;
    margin: 10px 0;
}

.view-btn {
    padding: 6px 14px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.8rem;
    transition: var(--transition);
}

.view-btn.active {
    background: var(--accent-blue);
    color: #fff;
    border-color: var(--accent-blue);
}

/* Calendar view */
.content-calendar {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.calendar-group {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
}

.calendar-group-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
}

.calendar-batch-name {
    font-weight: 600;
    color: var(--text-primary);
    text-transform: capitalize;
    flex: 1;
}

.calendar-batch-count {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.calendar-items {
    padding: 4px 0;
}

.calendar-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    cursor: pointer;
    transition: var(--transition);
    border-bottom: 1px solid rgba(48, 54, 61, 0.3);
}

.calendar-item:last-child {
    border-bottom: none;
}

.calendar-item:hover {
    background: rgba(88, 166, 255, 0.05);
}

.calendar-platform {
    font-size: 1.1rem;
    width: 24px;
    text-align: center;
}

.calendar-status {
    font-size: 0.6rem;
}

.calendar-title {
    font-weight: 500;
    color: var(--text-primary);
    min-width: 120px;
    max-width: 200px;
}

.calendar-preview {
    color: var(--text-muted);
    font-size: 0.75rem;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-has-image {
    font-size: 0.8rem;
}

.content-edit textarea {
    width: 100%;
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 10px;
    font-family: inherit;
    font-size: 0.85rem;
    resize: vertical;
    margin-bottom: 8px;
}

.content-edit input {
    width: 100%;
    background: var(--bg-primary);
    color: var(--accent-blue);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 0.8rem;
    margin-bottom: 8px;
}

.edit-actions {
    display: flex;
    gap: 8px;
}

.empty-state {
    text-align: center;
    padding: 40px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Content card with image layout */
.content-card-body {
    display: flex;
    gap: 12px;
    margin-bottom: 8px;
}

.content-card.has-image .content-card-body {
    flex-direction: row;
}

.content-image {
    flex-shrink: 0;
    width: 120px;
    height: 120px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid var(--border-color);
    transition: var(--transition);
}

.content-image:hover {
    border-color: var(--accent-blue);
    transform: scale(1.02);
}

.content-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.content-text {
    flex: 1;
    min-width: 0;
}

/* Image preview modal */
.image-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    cursor: pointer;
}

.image-modal-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    z-index: 1;
}

.image-modal-content img {
    max-width: 90vw;
    max-height: 80vh;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.image-modal-caption {
    text-align: center;
    margin-top: 12px;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.image-modal-close {
    position: absolute;
    top: -12px;
    right: -12px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.image-modal-close:hover {
    background: var(--accent-red);
    border-color: var(--accent-red);
}

@media (max-width: 600px) {
    .content-card-body {
        flex-direction: column;
    }
    .content-image {
        width: 100%;
        height: 180px;
    }
}

/* =========================================
   File Editor (interactive asset viewer)
   ========================================= */
.file-editor {
    max-width: 1200px;
    width: 95vw;
    height: 90vh;
    max-height: 90vh;
}

.editor-body {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.editor-body.mode-edit .editor-pane { flex: 1; }
.editor-body.mode-edit .preview-pane { display: none; }

.editor-body.mode-split .editor-pane { flex: 1; }
.editor-body.mode-split .preview-pane { flex: 1; border-left: 1px solid var(--border-color); }

.editor-body.mode-preview .editor-pane { display: none; }
.editor-body.mode-preview .preview-pane { flex: 1; }

.editor-pane {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.editor-textarea {
    flex: 1;
    width: 100%;
    resize: none;
    background: var(--bg-primary);
    color: var(--text-primary);
    border: none;
    padding: 16px 20px;
    font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
    font-size: 13px;
    line-height: 1.6;
    tab-size: 2;
    outline: none;
}

.editor-textarea::placeholder {
    color: var(--text-muted);
}

.preview-pane {
    overflow-y: auto;
    min-width: 0;
}

.preview-pane.full {
    border-left: none;
}

.editor-mode-toggle {
    display: flex;
    gap: 2px;
    background: var(--bg-tertiary);
    border-radius: 6px;
    padding: 2px;
}

.mode-btn {
    padding: 4px 12px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    transition: all var(--transition);
}

.mode-btn:hover {
    color: var(--text-primary);
}

.mode-btn.active {
    background: var(--accent-blue);
    color: white;
}

/* Editor responsive */
@media (max-width: 768px) {
    .file-editor {
        width: 100vw;
        height: 100vh;
        max-width: 100vw;
        max-height: 100vh;
        border-radius: 0;
    }
    .editor-body.mode-split {
        flex-direction: column;
    }
    .editor-body.mode-split .preview-pane {
        border-left: none;
        border-top: 1px solid var(--border-color);
    }
}

/* =========================================
   Directory Browser & Path Links
   ========================================= */
.dir-browser {
    max-width: 800px;
    width: 90vw;
    height: 80vh;
    max-height: 80vh;
}

.dir-list {
    display: flex;
    flex-direction: column;
}

.dir-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-color);
    font-size: 13px;
    cursor: pointer;
    transition: background var(--transition);
}

.dir-list-item:last-child { border-bottom: none; }
.dir-list-item:hover { background: var(--bg-tertiary); }
.dir-list-item.viewable:hover { background: rgba(88, 166, 255, 0.08); }

.dir-icon {
    width: 28px;
    flex-shrink: 0;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    font-family: 'Monaco', 'Menlo', monospace;
}

.dir-item-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
}

.dir-item .dir-item-name { font-weight: 500; }

.dir-item-meta {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--text-muted);
    min-width: 60px;
    text-align: right;
}

/* Path links in task context */
.path-link {
    color: var(--accent-blue);
    text-decoration: underline;
    text-decoration-style: dotted;
    cursor: pointer;
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 0.9em;
}

.path-link:hover {
    text-decoration-style: solid;
    color: var(--accent-blue);
}

.ext-link {
    color: var(--accent-blue);
    text-decoration: underline;
}

/* Task progress line */
.task-progress {
    font-size: 12px;
    color: var(--accent-green);
    margin-bottom: 8px;
    padding: 6px 10px;
    background: rgba(63, 185, 80, 0.06);
    border-radius: 4px;
    border-left: 2px solid var(--accent-green);
    line-height: 1.5;
}

/* Expanded context by default — show full text */
.task-context.expanded {
    -webkit-line-clamp: unset;
    line-height: 1.5;
}

/* ============================================================
   Events Calendar View
   ============================================================ */

.events-calendar { padding: 0; }
.events-calendar h2 { margin-bottom: 5px; }
.events-subtitle { color: var(--text-secondary); margin-bottom: 25px; font-size: 0.9rem; }

.events-section { margin-bottom: 30px; }
.events-section h3 { margin-bottom: 15px; color: var(--text-secondary); font-size: 1rem; text-transform: uppercase; letter-spacing: 0.05em; }

/* This Week Timeline */
.week-timeline { display: flex; flex-direction: column; gap: 8px; }
.week-event {
    display: flex; align-items: center; gap: 12px; padding: 12px 16px;
    background: var(--bg-secondary); border-radius: 8px; border: 1px solid var(--border-color);
}
.week-event.past { opacity: 0.5; }
.week-event.today { border-color: var(--accent-blue); background: rgba(59, 130, 246, 0.08); }
.week-event-day { font-weight: 600; width: 90px; color: var(--text-primary); }
.week-event-date { width: 60px; color: var(--text-secondary); font-size: 0.85rem; }
.week-event-name { flex: 1; font-weight: 500; }
.week-event-time { width: 50px; color: var(--text-secondary); font-size: 0.85rem; }
.week-event-platforms { width: 60px; }

/* Events Grid */
.events-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 15px; }
.event-card {
    background: var(--bg-secondary); border-radius: 10px; padding: 20px;
    border: 1px solid var(--border-color); transition: border-color 0.2s;
}
.event-card:hover { border-color: var(--accent-blue); }
.event-card.special { border-left: 3px solid #f59e0b; }
.event-card-header { display: flex; justify-content: space-between; margin-bottom: 10px; }
.event-day { text-transform: capitalize; font-weight: 600; color: var(--accent-blue); }
.event-time { color: var(--text-secondary); font-size: 0.85rem; }
.event-dates { color: #f59e0b; font-weight: 500; }
.event-card h4 { margin-bottom: 8px; }
.event-desc { color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 10px; }
.event-platforms { margin-bottom: 10px; font-size: 1.1rem; }
.event-themes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.theme-tag {
    font-size: 0.75rem; padding: 3px 8px; background: rgba(99, 102, 241, 0.15);
    color: var(--accent-blue); border-radius: 4px;
}
.event-hashtags { font-size: 0.8rem; color: var(--text-tertiary); word-break: break-all; }

@media (max-width: 768px) {
    .week-event { flex-wrap: wrap; gap: 6px; }
    .week-event-day { width: auto; }
    .week-event-date { width: auto; }
}

/* Sessions Table */
.sessions-summary { margin-bottom: 20px; }
.sessions-table-wrap { overflow-x: auto; border-radius: 8px; border: 1px solid var(--border-color); }
.sessions-table {
    width: 100%; border-collapse: collapse; font-size: 0.9rem;
}
.sessions-table thead { background: var(--bg-tertiary); }
.sessions-table th {
    padding: 10px 12px; text-align: left; font-weight: 600;
    color: var(--text-secondary); font-size: 0.8rem; text-transform: uppercase;
    letter-spacing: 0.5px; border-bottom: 1px solid var(--border-color);
}
.sessions-table td {
    padding: 8px 12px; border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}
.sessions-table tbody tr:hover { background: rgba(88, 166, 255, 0.04); }
.session-status {
    display: inline-block; padding: 2px 8px; border-radius: 12px;
    font-size: 0.75rem; font-weight: 600;
}
.status-running .session-status { background: rgba(63, 185, 80, 0.15); color: var(--accent-green); }
.status-completed .session-status { background: rgba(88, 166, 255, 0.15); color: var(--accent-blue); }
.status-error .session-status { background: rgba(248, 81, 73, 0.15); color: var(--accent-red); }
.summary-row td { padding: 4px 12px 10px; }
.session-summary { color: var(--text-secondary); font-size: 0.85rem; font-style: italic; }

/* ---------------------------------------------------------------------------
   Morning Review — Supplements to existing task-card styles
   --------------------------------------------------------------------------- */

/* Source badge (used in task-card-top alongside priority-badge) */
.mr-source-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-left: auto;
    flex-shrink: 0;
}

/* ---------------------------------------------------------------------------
   Morning Narrative Briefing
   --------------------------------------------------------------------------- */

.morning-narrative {
    margin-bottom: 24px;
    padding: 20px 24px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}
.morning-narrative .md-content {
    line-height: 1.7;
    font-size: 0.95rem;
    color: var(--text-primary);
}
.morning-narrative .md-content p {
    margin-bottom: 12px;
}
.morning-narrative .md-content hr {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 20px 0;
}
.morning-narrative .md-content a {
    color: var(--accent-blue);
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s;
}
.morning-narrative .md-content a:hover {
    border-bottom-color: var(--accent-blue);
}
.morning-narrative .md-content strong {
    color: var(--text-primary);
}
.morning-narrative .md-content h1,
.morning-narrative .md-content h2,
.morning-narrative .md-content h3 {
    margin-top: 16px;
    margin-bottom: 8px;
}

/* ---------------------------------------------------------------------------
   Project Sandbox View
   --------------------------------------------------------------------------- */

.sandbox-back {
    display: inline-block;
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-decoration: none;
    margin-bottom: 4px;
    transition: color 0.15s;
}
.sandbox-back:hover { color: var(--accent-blue); }

.sandbox-title { margin-top: 0; }

.sandbox-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
    font-size: 0.85rem;
}
.sandbox-stage {
    font-weight: 600;
    text-transform: capitalize;
}
.sandbox-date { color: var(--text-secondary); }
.sandbox-infra {
    background: rgba(88, 166, 255, 0.12);
    color: var(--accent-blue);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
}

.sandbox-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.btn-muted {
    opacity: 0.6;
}
.btn-muted:hover {
    opacity: 1;
}

/* Status cards */
.sandbox-status-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 20px;
}
.sandbox-status-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 14px 16px;
}
.sandbox-status-card.needs {
    border-left: 3px solid var(--accent-orange);
}
.sandbox-status-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 8px;
}
.sandbox-status-card ul {
    list-style: none;
    padding: 0;
}
.sandbox-status-card li {
    font-size: 0.85rem;
    color: var(--text-primary);
    padding: 3px 0;
    line-height: 1.4;
}
.sandbox-status-card li::before {
    content: "\2022";
    color: var(--text-muted);
    margin-right: 8px;
}
.sandbox-status-card.needs li::before {
    color: var(--accent-orange);
}

/* README */
.sandbox-readme {
    margin-bottom: 24px;
    padding: 16px 20px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}
.sandbox-readme .md-content {
    line-height: 1.6;
    font-size: 0.9rem;
}
.sandbox-readme .md-content h1 { font-size: 1.3rem; margin-bottom: 8px; }
.sandbox-readme .md-content h2 { font-size: 1.05rem; margin-top: 16px; margin-bottom: 6px; color: var(--text-secondary); }
.sandbox-readme .md-content p { margin-bottom: 8px; }

/* File browser */
.sandbox-files {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}
.sandbox-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-tertiary);
}
.sandbox-tab {
    flex: 1;
    padding: 10px 16px;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    text-transform: capitalize;
    transition: color 0.15s, background 0.15s;
    border-bottom: 2px solid transparent;
}
.sandbox-tab:hover { color: var(--text-primary); background: rgba(255,255,255,0.03); }
.sandbox-tab.active {
    color: var(--accent-blue);
    border-bottom-color: var(--accent-blue);
    background: rgba(88, 166, 255, 0.05);
}
.sandbox-tab-count {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-left: 4px;
}
.sandbox-tab.active .sandbox-tab-count { color: var(--accent-blue); }

.sandbox-file-list {
    max-height: 300px;
    overflow-y: auto;
}
.sandbox-file {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    cursor: pointer;
    transition: background 0.1s;
    border-bottom: 1px solid rgba(48, 54, 61, 0.5);
}
.sandbox-file:hover { background: rgba(255,255,255,0.03); }
.sandbox-file:last-child { border-bottom: none; }
.sandbox-file-icon { margin-right: 8px; font-size: 0.9rem; }
.sandbox-file-name {
    flex: 1;
    font-size: 0.85rem;
    color: var(--text-primary);
    font-family: 'SFMono-Regular', Consolas, monospace;
}
.sandbox-file-size {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-left: 8px;
}

.sandbox-empty {
    padding: 24px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* Inline file viewer */
.sandbox-viewer {
    border-top: 1px solid var(--border-color);
    max-height: 500px;
    display: flex;
    flex-direction: column;
}
.sandbox-viewer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: var(--bg-tertiary);
    font-size: 0.8rem;
    font-family: 'SFMono-Regular', Consolas, monospace;
    color: var(--text-secondary);
}
.sandbox-viewer-content {
    padding: 16px;
    overflow-y: auto;
    flex: 1;
    font-size: 0.85rem;
    line-height: 1.6;
}
.sandbox-viewer-content pre {
    background: var(--bg-primary);
    padding: 12px;
    border-radius: 4px;
    overflow-x: auto;
    font-size: 0.8rem;
}

/* Responsive */
@media (max-width: 768px) {
    .sandbox-status-row { grid-template-columns: 1fr; }
    .sandbox-actions { flex-direction: column; }
}

/* ---------------------------------------------------------------------------
   Tonight's Focus Directive
   --------------------------------------------------------------------------- */

.tonight-directive {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 14px 16px;
}
.tonight-input-row {
    display: flex;
    gap: 8px;
}
.tonight-input {
    flex: 1;
}
.tonight-pending {
    margin-bottom: 8px;
}
.tonight-empty {
    color: var(--text-muted);
    font-size: 0.8rem;
    margin-bottom: 4px;
}
.tonight-task {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    margin-bottom: 6px;
    background: rgba(88, 166, 255, 0.08);
    border: 1px solid rgba(88, 166, 255, 0.2);
    border-radius: 6px;
}
.tonight-task-text {
    font-size: 0.85rem;
    color: var(--text-primary);
}

/* ---------------------------------------------------------------------------
   Wishlist View
   --------------------------------------------------------------------------- */

.wishlist-editor {
    margin-bottom: 16px;
}
.wishlist-textarea {
    width: 100%;
    min-height: 400px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 0.85rem;
    padding: 14px;
    resize: vertical;
    line-height: 1.6;
}
.wishlist-textarea:focus {
    outline: none;
    border-color: var(--accent-blue);
}
.wishlist-editor-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.wishlist-section-header {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    padding: 12px 0 6px;
    margin-top: 8px;
    border-bottom: 1px solid var(--border-color);
}

.wishlist-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(48, 54, 61, 0.4);
    gap: 8px;
}
.wishlist-item:hover {
    background: rgba(255, 255, 255, 0.02);
}
.wishlist-item.developed {
    opacity: 0.6;
}
.wishlist-item.struck {
    opacity: 0.4;
}
.wishlist-item-text {
    font-size: 0.85rem;
    line-height: 1.5;
    flex: 1;
}
.wishlist-item-text strong {
    color: var(--accent-blue);
}
.wishlist-item-text del {
    color: var(--text-muted);
}

.wishlist-tag {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    vertical-align: middle;
    margin-right: 4px;
}
.wishlist-tag.developed {
    background: rgba(63, 185, 80, 0.15);
    color: var(--accent-green);
}
.wishlist-tag.researched {
    background: rgba(163, 113, 247, 0.15);
    color: var(--accent-purple);
}

.wishlist-delete {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0 4px;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
    flex-shrink: 0;
}
.wishlist-item:hover .wishlist-delete,
.tonight-task:hover .wishlist-delete {
    opacity: 1;
}
.wishlist-delete:hover {
    color: var(--accent-red);
}

/* ---- Docs View ---- */
.docs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
    padding: 0 4px;
}
.docs-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 20px;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.1s;
}
.docs-card:hover {
    border-color: var(--accent-blue);
    transform: translateY(-2px);
}
.docs-card-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
}
.docs-card-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 12px;
}
.docs-card-preview {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.docs-content {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 32px;
    max-width: 900px;
    line-height: 1.7;
}
.docs-content .md-content h2 {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-subtle);
}
.docs-content .md-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    font-size: 0.9rem;
}
.docs-content .md-content th,
.docs-content .md-content td {
    padding: 8px 12px;
    border: 1px solid var(--border-subtle);
    text-align: left;
}
.docs-content .md-content th {
    background: var(--bg-secondary);
    font-weight: 600;
}
.docs-content .md-content code {
    font-size: 0.85em;
}
.docs-content .md-content pre {
    overflow-x: auto;
    max-width: 100%;
}
@media (max-width: 768px) {
    .docs-grid {
        grid-template-columns: 1fr;
    }
    .docs-content {
        padding: 16px;
    }
}

/* =========================================
   Action Queue — "Today's Move" Banner
   ========================================= */
.action-queue-banner {
    background: linear-gradient(135deg, rgba(63, 185, 80, 0.12), rgba(88, 166, 255, 0.08));
    border: 1px solid rgba(63, 185, 80, 0.3);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.aq-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.aq-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--accent-green);
}

.aq-progress {
    font-size: 12px;
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    padding: 2px 10px;
    border-radius: 10px;
}

.aq-action {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
    line-height: 1.3;
}

.aq-meta {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.aq-time {
    font-size: 12px;
    font-weight: 600;
    color: var(--accent-blue);
    background: rgba(88, 166, 255, 0.1);
    padding: 2px 8px;
    border-radius: 4px;
}

.aq-why {
    font-size: 13px;
    color: var(--text-secondary);
    flex: 1;
}

.aq-revenue {
    font-size: 13px;
    font-weight: 600;
    color: var(--accent-green);
    margin-bottom: 10px;
}

.aq-steps {
    list-style: none;
    counter-reset: aq-step;
    padding: 0;
    margin: 12px 0;
}

.aq-steps li {
    counter-increment: aq-step;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 0;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.aq-steps li::before {
    content: counter(aq-step);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    min-width: 22px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary);
}

.aq-actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.aq-btn {
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all var(--transition);
}

.aq-done-btn {
    background: var(--accent-green) !important;
    color: #fff !important;
}

.aq-done-btn:hover {
    filter: brightness(1.15);
}

.aq-btn.btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.aq-btn.btn-secondary:hover {
    border-color: var(--text-secondary);
}

@media (max-width: 768px) {
    .aq-action {
        font-size: 17px;
    }
    .aq-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
}

/* =========================================
   Checklist View
   ========================================= */
.checklist-progress {
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 3px;
    margin-bottom: 20px;
    overflow: hidden;
}
.checklist-progress-bar {
    height: 100%;
    background: var(--accent-green);
    border-radius: 3px;
    transition: width 0.3s ease;
}
.checklist-section {
    margin-bottom: 24px;
}
.checklist-section-header {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.checklist-section-header h2 {
    font-size: 16px;
    color: var(--accent-blue);
    margin: 0;
}
.checklist-section-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
}
.checklist-section-count {
    font-size: 12px;
    color: var(--text-muted);
    margin-left: auto;
    background: var(--bg-tertiary);
    padding: 2px 8px;
    border-radius: 10px;
}
.checklist-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.checklist-item {
    display: flex;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all var(--transition);
}
.checklist-item:hover {
    border-color: var(--accent-blue);
    background: var(--bg-tertiary);
}
.checklist-item.checked {
    opacity: 0.55;
    border-color: var(--accent-green);
}
.checklist-item.checked .checklist-item-title {
    text-decoration: line-through;
    color: var(--text-secondary);
}
.checklist-checkbox {
    width: 22px;
    height: 22px;
    min-width: 22px;
    border: 2px solid var(--border-color);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--accent-green);
    margin-top: 1px;
    transition: all var(--transition);
}
.checklist-item.checked .checklist-checkbox {
    border-color: var(--accent-green);
    background: rgba(63, 185, 80, 0.15);
}
.checklist-item-content {
    flex: 1;
    min-width: 0;
}
.checklist-item-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--text-primary);
}
.checklist-item-body {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}
.checklist-item-body ul {
    padding-left: 16px;
    margin: 4px 0;
}
.checklist-item-body li {
    margin-bottom: 2px;
}
.checklist-item-body code {
    background: var(--bg-tertiary);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 12px;
}
.checklist-item-body a {
    color: var(--accent-blue);
    text-decoration: none;
}
.checklist-item-body a:hover {
    text-decoration: underline;
}
.checklist-item-body table {
    margin: 8px 0;
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.checklist-item-body th,
.checklist-item-body td {
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    text-align: left;
}
.checklist-item-body th {
    background: var(--bg-tertiary);
}
.checklist-item-body strong {
    color: var(--text-primary);
}
.checklist-extras {
    margin-top: 24px;
    padding: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}
.checklist-extras h2 {
    color: var(--accent-blue);
    font-size: 16px;
    margin-bottom: 12px;
}
@media (max-width: 768px) {
    .checklist-item {
        padding: 10px 12px;
    }
    .checklist-item-title {
        font-size: 15px;
    }
    .checklist-section-header {
        flex-direction: column;
        gap: 4px;
    }
    .checklist-section-count {
        margin-left: 0;
    }
}

/* =========================================
   Deliverable Cards
   ========================================= */
.deliverable-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 8px;
}

.deliverable-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.deliverable-type-icon {
    font-size: 16px;
    flex-shrink: 0;
}

.deliverable-title {
    font-weight: 600;
    font-size: 14px;
    flex: 1;
    color: var(--text-primary);
}

.deliverable-status {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.deliverable-status.pending_review { background: rgba(210, 153, 34, 0.15); color: var(--accent-orange); }
.deliverable-status.approved { background: rgba(63, 185, 80, 0.15); color: var(--accent-green); }
.deliverable-status.rejected { background: rgba(248, 81, 73, 0.15); color: var(--accent-red); }

.deliverable-meta {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.deliverable-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* =========================================
   Project Badge
   ========================================= */
.project-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    background: rgba(88, 166, 255, 0.12);
    color: var(--accent-blue);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--transition);
}

.project-badge:hover {
    background: rgba(88, 166, 255, 0.25);
}

/* =========================================
   Atlas View
   ========================================= */
.atlas-mode-controls {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.atlas-mode-btn {
    padding: 8px 20px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: all var(--transition);
}

.atlas-mode-btn:hover {
    border-color: var(--accent-blue);
    color: var(--text-primary);
}

.atlas-mode-btn.active {
    background: rgba(88, 166, 255, 0.15);
    border-color: var(--accent-blue);
    color: var(--accent-blue);
    font-weight: 600;
}

.atlas-bridges {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

.atlas-bridge-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.atlas-bridge-card .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-muted);
    flex-shrink: 0;
}

.atlas-bridge-card .dot.active { background: var(--accent-green); }
.atlas-bridge-card .dot.inactive { background: var(--accent-red); }

.atlas-bridge-name {
    font-weight: 600;
    font-size: 13px;
    flex: 1;
}

.atlas-bridge-model {
    font-size: 12px;
    color: var(--text-secondary);
}

.atlas-bridge-latency {
    font-size: 11px;
    color: var(--text-muted);
    font-family: monospace;
}

.atlas-task-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px 16px;
    margin-top: 8px;
}

.atlas-task-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 6px;
}

.atlas-task-request {
    font-size: 13px;
    font-weight: 500;
    flex: 1;
}

.atlas-task-status {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}

.atlas-task-result {
    font-size: 12px;
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    padding: 8px 10px;
    border-radius: 4px;
    margin-bottom: 6px;
    max-height: 80px;
    overflow: hidden;
    font-family: monospace;
    white-space: pre-wrap;
}

.atlas-task-meta {
    display: flex;
    gap: 12px;
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.atlas-task-actions {
    display: flex;
    gap: 6px;
}

.atlas-log-entries {
    max-height: 300px;
    overflow-y: auto;
    font-family: monospace;
    font-size: 12px;
    background: var(--bg-tertiary);
    border-radius: 6px;
    padding: 10px;
}

.atlas-log-entry {
    display: flex;
    gap: 10px;
    padding: 2px 0;
    border-bottom: 1px solid rgba(48, 54, 61, 0.4);
}

.atlas-log-time {
    color: var(--text-muted);
    flex-shrink: 0;
    min-width: 60px;
}

.atlas-log-msg {
    color: var(--text-secondary);
    word-break: break-word;
}

/* =========================================
   Claude Context Banner
   ========================================= */
.claude-context-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(163, 113, 247, 0.1);
    border: 1px solid rgba(163, 113, 247, 0.25);
    border-radius: 6px;
    margin-bottom: 12px;
    font-size: 13px;
}

.claude-context-label {
    color: var(--accent-purple);
    font-weight: 600;
    font-size: 12px;
}

.claude-context-text {
    color: var(--text-primary);
    flex: 1;
}

.claude-context-clear {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 18px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

.claude-context-clear:hover {
    color: var(--text-primary);
}

/* =========================================
   Project Detail Tabs
   ========================================= */
.detail-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.detail-tab {
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition);
}

.detail-tab:hover {
    color: var(--text-primary);
}

.detail-tab.active {
    color: var(--accent-blue);
    border-bottom-color: var(--accent-blue);
}

.detail-tab .tab-count {
    font-size: 11px;
    color: var(--text-muted);
    margin-left: 4px;
}

.detail-tab.active .tab-count {
    color: var(--accent-blue);
}

/* =========================================
   Claude Status Text (supplement)
   ========================================= */
.claude-status-text {
    color: var(--text-secondary);
}

/* =========================================
   Morning Deliverables Section
   ========================================= */
.morning-deliverables {
    margin-top: 16px;
}

.morning-deliverables h2 {
    font-size: 15px;
    margin-bottom: 10px;
    color: var(--text-primary);
}

/* =========================================
   Stats Grid (Project Detail)
   ========================================= */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.stat-item {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 12px;
    text-align: center;
}

.stat-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--accent-blue);
}

.stat-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 2px;
}

/* =========================================
   Overnight Performance Tab
   ========================================= */
.performance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}

.performance-grid .stat-item .stat-value {
    color: var(--accent-purple);
}

/* =========================================
   Chat View
   ========================================= */
.chat-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 32px);
    margin: -16px;
    padding: 0;
    position: relative;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
}

.chat-day-divider {
    text-align: center;
    font-size: 11px;
    color: var(--text-muted);
    margin: 8px 0;
    position: relative;
}

.chat-day-divider::before,
.chat-day-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: calc(50% - 60px);
    height: 1px;
    background: var(--border-color);
}

.chat-day-divider::before { left: 0; }
.chat-day-divider::after { right: 0; }

.chat-bubble {
    max-width: 75%;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.5;
    word-wrap: break-word;
    white-space: pre-wrap;
}

.chat-bubble.user {
    align-self: flex-end;
    background: var(--accent-blue);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.chat-bubble.agent {
    align-self: flex-start;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-bottom-left-radius: 4px;
}

.chat-bubble.agent .chat-bubble-inner {
    /* markdown content styling */
}

.chat-bubble.agent .chat-bubble-inner p { margin: 0 0 8px; }
.chat-bubble.agent .chat-bubble-inner p:last-child { margin-bottom: 0; }
.chat-bubble.agent .chat-bubble-inner code {
    background: var(--bg-tertiary);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 13px;
}
.chat-bubble.agent .chat-bubble-inner pre {
    background: var(--bg-primary);
    padding: 10px;
    border-radius: 6px;
    overflow-x: auto;
    margin: 8px 0;
}
.chat-bubble.agent .chat-bubble-inner pre code {
    background: none;
    padding: 0;
}

.chat-bubble .chat-error {
    color: var(--accent-red);
    font-style: italic;
}

.chat-timestamp {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
    padding: 0 4px;
}

.chat-bubble.user + .chat-timestamp { text-align: right; }
.chat-bubble.agent + .chat-timestamp { text-align: left; }

/* File card inside bubble */
.chat-file-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 6px;
    max-width: 320px;
    cursor: pointer;
    transition: border-color var(--transition);
}

.chat-file-card:hover {
    border-color: var(--accent-blue);
}

.chat-file-card .file-icon {
    font-size: 24px;
    flex-shrink: 0;
    width: 32px;
    text-align: center;
}

.chat-file-card .file-info {
    flex: 1;
    min-width: 0;
}

.chat-file-card .file-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-file-card .file-size {
    font-size: 11px;
    color: var(--text-secondary);
}

.chat-file-card .file-thumb {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}

/* Thinking indicator */
.chat-thinking {
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    border-bottom-left-radius: 4px;
    color: var(--text-secondary);
    font-size: 13px;
}

.chat-thinking .dots {
    display: flex;
    gap: 4px;
}

.chat-thinking .dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-muted);
    animation: chatDotPulse 1.4s infinite;
}

.chat-thinking .dots span:nth-child(2) { animation-delay: 0.2s; }
.chat-thinking .dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes chatDotPulse {
    0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
    40% { opacity: 1; transform: scale(1); }
}

/* Input bar */
.chat-input-bar {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    align-items: flex-end;
}

.chat-input-bar textarea {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    resize: none;
    max-height: 120px;
    min-height: 40px;
    line-height: 1.4;
}

.chat-input-bar textarea:focus {
    outline: none;
    border-color: var(--accent-blue);
}

.chat-input-bar textarea::placeholder {
    color: var(--text-muted);
}

.chat-input-buttons {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.chat-btn {
    width: 40px;
    height: 40px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: all var(--transition);
}

.chat-btn:hover {
    color: var(--text-primary);
    border-color: var(--text-muted);
}

.chat-btn.send {
    background: var(--accent-blue);
    border-color: var(--accent-blue);
    color: #fff;
}

.chat-btn.send:hover {
    opacity: 0.9;
}

.chat-btn.send:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Drag-and-drop overlay */
.chat-dropzone-overlay {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(88, 166, 255, 0.08);
    border: 2px dashed var(--accent-blue);
    border-radius: 8px;
    z-index: 50;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.chat-dropzone-overlay.active {
    display: flex;
}

.chat-dropzone-overlay .drop-label {
    font-size: 16px;
    color: var(--accent-blue);
    font-weight: 600;
    padding: 16px 24px;
    background: var(--bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--accent-blue);
}

/* Pending file preview above input */
.chat-pending-files {
    display: flex;
    gap: 8px;
    padding: 8px 16px 0;
    background: var(--bg-secondary);
    flex-wrap: wrap;
}

.chat-pending-file {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 12px;
    color: var(--text-secondary);
}

.chat-pending-file .remove-file {
    cursor: pointer;
    color: var(--text-muted);
    font-size: 14px;
}

.chat-pending-file .remove-file:hover {
    color: var(--accent-red);
}

/* Empty state */
.chat-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    color: var(--text-muted);
    gap: 12px;
    padding: 40px;
}

.chat-empty .chat-empty-icon {
    font-size: 48px;
    opacity: 0.3;
}

.chat-empty .chat-empty-text {
    font-size: 14px;
    text-align: center;
    max-width: 300px;
    line-height: 1.5;
}