/* ==========================================================================
   AI Workspace - Shortcut-Style CSS
   ========================================================================== */

:root {
    /* Shortcut-inspired colors */
    --color-primary: #494BCB;
    --color-primary-light: #797ADE;
    --color-primary-dark: #03045E;
    --color-accent: #FFDE87;

    /* Backgrounds */
    --bg-sidebar: #111116;
    --bg-main: #f7f8fa;
    --bg-card: #ffffff;
    --bg-hover: #f1f5f9;

    /* Text */
    --text-primary: #1a1a1a;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    --text-sidebar: rgba(255, 255, 255, 0.6);
    --text-sidebar-active: #ffffff;

    /* Borders */
    --border-light: #e2e8f0;
    --border-card: #e1e5e9;

    /* Status colors */
    --color-success: #16a34a;
    --color-success-bg: #f0f9f4;
    --color-error: #dc2626;
    --color-error-bg: #fef2f2;
    --color-warning: #ca8a04;
    --color-warning-bg: #fefce8;

    /* Type colors */
    --type-adr: #494BCB;
    --type-tech-design: #0891b2;
    --type-investigation: #ca8a04;
    --type-runbook: #16a34a;
    --type-notes: #64748b;

    /* Spacing */
    --sidebar-width: 220px;
    --header-height: 64px;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
}

/* ==========================================================================
   Reset & Base
   ========================================================================== */

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

html, body {
    height: 100%;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-primary);
    background: var(--bg-main);
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--color-primary);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   Layout
   ========================================================================== */

.app-container {
    display: flex;
    min-height: 100vh;
}

/* ==========================================================================
   Sidebar
   ========================================================================== */

.sidebar {
    width: var(--sidebar-width);
    min-width: 60px;
    max-width: 400px;
    background: var(--bg-sidebar);
    color: white;
    position: fixed;
    height: 100vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    border-radius: 0 24px 0 0;
    transition: none;
}

.sidebar-resize-handle {
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    height: 100%;
    cursor: ew-resize;
    background: transparent;
    z-index: 100;
    transition: background 0.15s ease;
}

.sidebar-resize-handle:hover,
.sidebar-resize-handle.resizing {
    background: rgba(99, 102, 241, 0.55);
}

/* Keep the resize handle available in collapsed mode so dragging it past the
   threshold will re-expand the sidebar. */

/* Collapsed sidebar */
.sidebar.collapsed {
    width: 60px;
}

.sidebar.collapsed .logo-text,
.sidebar.collapsed .nav-item span,
.sidebar.collapsed .section-title,
.sidebar.collapsed .footer-text,
.sidebar.collapsed .clear-filters-btn,
.sidebar.collapsed .filter-indicator {
    display: none;
}

.sidebar.collapsed .sidebar-header {
    padding: 12px 6px 8px;
    flex-direction: column;
    gap: 8px;
    justify-content: center;
}

.sidebar.collapsed .logo {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
    overflow: visible;
}
.sidebar.collapsed .logo-home-btn {
    display: inline-flex;
    width: 32px; height: 28px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
    margin: 0;
}
.sidebar.collapsed .logo-home-btn:hover {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}
.sidebar.collapsed .logo-home-btn svg { width: 16px; height: 16px; }

.sidebar.collapsed .sidebar-toggle {
    position: static;
    width: 100%;
    padding: 6px 0;
    background: rgba(255, 255, 255, 0.08);
}

.sidebar.collapsed .sidebar-toggle:hover {
    background: rgba(255, 255, 255, 0.18);
}

.sidebar.collapsed .sidebar-toggle svg {
    transform: rotate(180deg);
}

.sidebar.collapsed .nav-item {
    justify-content: center;
    padding: 12px;
}

.sidebar.collapsed .nav-item.active {
    margin-left: 0;
    border-left: none;
    border-bottom: 3px solid var(--color-primary);
}

.sidebar.collapsed .nav-icon {
    margin: 0;
}

.sidebar.collapsed .type-dot {
    width: 10px;
    height: 10px;
}

.sidebar.collapsed .btn-refresh {
    padding: 12px;
}

.sidebar.collapsed .btn-refresh span {
    display: none;
}

.sidebar.collapsed .sidebar-section {
    padding: 12px 8px;
}

/* ---- Collapsed sidebar: agent rows become a compact icon + 4-letter chip ---- */
.agent-name-short { display: none; }

.sidebar.collapsed .agent-item {
    padding: 6px 4px;
    align-items: center;
    border-left-width: 3px;
}
.sidebar.collapsed .agent-row-1 {
    flex-direction: column;
    align-items: center;
    gap: 3px;
    width: 100%;
}
.sidebar.collapsed .agent-row-2,
.sidebar.collapsed .agent-row-3,
.sidebar.collapsed .agent-status,
.sidebar.collapsed .agent-name {
    display: none;
}
.sidebar.collapsed .agent-vendor-icon {
    width: 11px; height: 11px;
}
.sidebar.collapsed .agent-name-short {
    display: block;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #fff;
    text-align: center;
    line-height: 1;
    text-transform: uppercase;
}
.sidebar.collapsed .agent-item.awaiting-prompt .agent-name-short {
    color: #fde68a;
}
.sidebar.collapsed .agents-empty { font-size: 9px; padding: 0; text-align: center; }
.sidebar.collapsed #section-agents .section-title .agents-count,
.sidebar.collapsed #section-agents .section-title .launch-agent-bar-btn,
.sidebar.collapsed #section-agents .section-title .prompts-refresh-btn { display: none; }
.sidebar.collapsed #section-agents .section-content { padding: 4px 2px; }
.sidebar.collapsed .agents-list { gap: 5px; }

.sidebar.collapsed .filter-btn {
    justify-content: center;
}

/* Icon-only backup button in collapsed sidebar */
.sidebar.collapsed .sidebar-footer {
    padding: 12px 6px;
}

.sidebar.collapsed .footer-row {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* Instant CSS tooltips for the collapsed-sidebar footer buttons.
   Reads from the standard `title` attribute via the JS-mirrored `data-tip`
   on these buttons (see updateCollapsedTooltips in base.html). */
.sidebar.collapsed .footer-row button[data-tip] { position: relative; }
.sidebar.collapsed .footer-row button[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    padding: 6px 10px;
    background: #111827;
    color: #f9fafb;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.08);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
    z-index: 1000;
}
.sidebar.collapsed .footer-row button[data-tip]::before {
    content: "";
    position: absolute;
    left: calc(100% + 4px);
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-right-color: #111827;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
    z-index: 1000;
}
.sidebar.collapsed .footer-row button[data-tip]:hover::after,
.sidebar.collapsed .footer-row button[data-tip]:hover::before {
    opacity: 1;
}

.sidebar.collapsed .footer-text,
.sidebar.collapsed .auto-save-status {
    display: none;
}

.sidebar.collapsed .backup-btn {
    padding: 6px;
    gap: 0;
    width: 36px;
    height: 36px;
    justify-content: center;
    /* Hide raw text nodes ("Back Up") without needing to wrap them */
    font-size: 0;
    line-height: 0;
}

.sidebar.collapsed .backup-btn > *:not(svg) {
    display: none;
}

.sidebar.collapsed .backup-btn svg {
    width: 16px;
    height: 16px;
}

.main-content.sidebar-collapsed {
    margin-left: 60px;
}

.sidebar-header {
    padding: 20px 16px 20px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    gap: 6px;
    min-width: 0;
}

.sidebar-toggle {
    background: transparent;
    border: none;
    color: var(--text-sidebar);
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    flex-shrink: 0;
    z-index: 2;
}

.sidebar-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.sidebar-toggle svg {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
}

.logo {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.logo-icon {
    background: var(--color-primary);
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
    flex-shrink: 0;
}

.logo-text {
    font-weight: 600;
    font-size: 16px;
    color: white;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 0 1 auto;
}

.logo-home-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px;
    border-radius: 5px;
    color: rgba(255, 255, 255, 0.65);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    text-decoration: none;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
    flex-shrink: 0;
}
.logo-home-btn:hover {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

.sidebar-nav {
    padding: 16px 12px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    color: var(--text-sidebar);
    border-radius: 8px;
    transition: all var(--transition-fast);
    text-decoration: none;
    margin-bottom: 4px;
}

.nav-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-sidebar-active);
    text-decoration: none;
}

.nav-item.active {
    background: rgba(73, 75, 203, 0.2);
    color: var(--text-sidebar-active);
    border-left: 3px solid var(--color-primary);
    margin-left: -3px;
}

.nav-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.sidebar-section {
    padding: 16px 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-section-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    margin: -8px -12px;
    border-radius: 6px;
    color: var(--text-sidebar);
    text-decoration: none;
    font-size: 13px;
    transition: all var(--transition-fast);
}

.sidebar-section-link:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-sidebar-active);
}

.sidebar-section-link.active {
    background: rgba(255, 255, 255, 0.15);
    color: var(--text-sidebar-active);
}

.sidebar-section-link .nav-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.section-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-sidebar);
    padding: 0 12px 12px;
}

.nav-item-small {
    font-size: 13px;
    padding: 8px 12px;
}

.type-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Filter button styles */
.filter-btn {
    width: 100%;
    border: none;
    background: transparent;
    text-align: left;
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
    justify-content: flex-start;
}

/* Document Types section - match Claude Prompts alignment */
#content-doc-types {
    padding: 0;
}

#content-doc-types .filter-btn {
    margin: 0;
    padding: 8px 12px;
}

.filter-btn .filter-indicator {
    display: none;
}

.filter-btn.filter-active {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-sidebar-active);
}

.filter-btn.filter-active .filter-indicator {
    display: block;
}

.filter-indicator {
    width: 6px;
    height: 6px;
    background: var(--color-primary);
    border-radius: 50%;
    margin-left: auto;
    flex-shrink: 0;
    box-shadow: 0 0 6px var(--color-primary);
}

/* Clear filters button */
.section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.clear-filters-btn {
    font-size: 10px;
    font-weight: 500;
    color: var(--color-primary-light);
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.clear-filters-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.prompts-refresh-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: 4px;
}

.prompts-refresh-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-primary-light);
}

.prompts-refresh-btn.spinning svg {
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Inline pill that sits right after the (N) agents count and triggers
   POST /api/agents/launch-bar. Native title= drives the tooltip. */
.launch-agent-bar-btn {
    margin-left: 8px;
    padding: 2px 8px 2px 6px;
    border-radius: 999px;
    border: 1px solid rgba(99, 102, 241, 0.45);
    background: rgba(99, 102, 241, 0.12);
    color: var(--color-primary-light, #a5b4fc);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    line-height: 1;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
    white-space: nowrap;
}
.launch-agent-bar-btn:hover {
    background: rgba(99, 102, 241, 0.28);
    border-color: #818cf8;
    color: #c7d2fe;
}
.launch-agent-bar-btn:disabled,
.launch-agent-bar-btn.launching {
    opacity: 0.6;
    cursor: progress;
}
.launch-agent-bar-btn.launching svg {
    animation: spin 0.6s linear infinite;
}

.sidebar-footer {
    margin-top: auto;
    padding: 16px 20px 24px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}
.footer-row .footer-text { flex: 1; min-width: 0; }

.footer-text {
    font-size: 12px;
    color: var(--text-sidebar);
}

.backup-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border: none;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.backup-btn svg {
    flex-shrink: 0;
}

.backup-btn.needs-backup {
    background: #dc2626;
    color: white;
}

.backup-btn.needs-backup:hover {
    background: #b91c1c;
}

.backup-btn.backed-up {
    background: #16a34a;
    color: white;
}

.backup-btn.backed-up:hover {
    background: #15803d;
}

.backup-btn:disabled {
    opacity: 0.7;
    cursor: wait;
}

.backup-btn .spinning {
    animation: spin 1s linear infinite;
}

.undo-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.55);
}
.undo-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.undo-btn:not(:disabled).has-action {
    background: #f59e0b;
    border-color: #d97706;
    color: #1f2937;
}
.undo-btn:not(:disabled).has-action:hover { background: #d97706; color: #fff; }
.undo-btn svg { flex-shrink: 0; }
.sidebar.collapsed .undo-btn {
    width: 36px;
    height: 36px;
    padding: 6px;
    gap: 0;
    justify-content: center;
    /* Hide the raw "Undo" text without needing to wrap it in a span. */
    font-size: 0;
    line-height: 0;
}
.sidebar.collapsed .undo-btn > *:not(svg) { display: none; }
.sidebar.collapsed .undo-btn svg { width: 16px; height: 16px; }

.restart-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border: none;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    background: #4338ca;
    color: white;
}
.restart-btn:hover { background: #3730a3; }
.restart-btn:disabled { opacity: 0.7; cursor: wait; }
.restart-btn svg { flex-shrink: 0; }
.restart-btn .spinning { animation: spin 1s linear infinite; }
.sidebar.collapsed .restart-btn {
    width: 36px;
    height: 36px;
    padding: 6px;
    gap: 0;
    justify-content: center;
    /* Hide the raw "Restart" text node without wrapping it. */
    font-size: 0;
    line-height: 0;
}
.sidebar.collapsed .restart-btn > *:not(svg) { display: none; }
.sidebar.collapsed .restart-btn svg { width: 16px; height: 16px; }

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   Main Content
   ========================================================================== */

.main-content {
    flex: 1;
    margin-left: var(--sidebar-width);
    padding: 24px 32px;
    min-height: 100vh;
    min-width: 0;
    /* NOTE: do not set overflow here. A scroll container on main-content
       would hijack `position: sticky` on children like .filter-bar. Wide
       content (tables, code blocks) handles its own overflow locally. */
}

/* ==========================================================================
   Content Header
   ========================================================================== */

.content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;

    /* Floating card — same indigo language as the .btn-primary New Document
       button and the h1 pill nested inside. Replaces the old edge-to-edge
       white rectangle with a 1 px indigo border + soft shadow. */
    background: linear-gradient(180deg, #ffffff 0%, #fafbff 100%);
    border: 1px solid rgba(99, 102, 241, 0.20);
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(99, 102, 241, 0.10);
    padding: 12px 18px;
    margin: 8px 4px 24px;

    /* `top: 8px` (was 0) keeps the rounded top corners visible while
       sticky — flush 0 would clip them to the viewport edge. */
    position: sticky;
    top: 8px;
    z-index: 25;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 1;
    min-width: 0;
    flex-wrap: wrap;
}

.header-subtitle {
    font-size: 14px;
    color: var(--text-muted);
    font-weight: normal;
}

.content-header h1 {
    /* Match the breadcrumb feel on doc-view: plain, lightweight, calm.
       The page title is a label, not a CTA — the New Document button
       carries the colored accent. */
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    background: none;
    padding: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    letter-spacing: 0;
}

.doc-count {
    font-size: 14px;
    color: var(--text-secondary);
    background: var(--bg-hover);
    padding: 4px 12px;
    border-radius: 100px;
}

.doc-path {
    font-size: 12px;
    color: #666;
    font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
    margin-left: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 300px;
}

@media (max-width: 1200px) {
    .doc-path {
        max-width: 200px;
    }
}

@media (max-width: 900px) {
    .doc-path {
        display: none;
    }
}

.auto-save-status {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
    opacity: 0.7;
}

.auto-save-status:not(:empty)::before {
    content: '•';
    margin-right: 4px;
    color: #22c55e;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    transition: opacity 0.18s ease, max-width 0.25s ease;
    max-width: 2000px;
    overflow: hidden;
}
.header-actions.collapsed {
    max-width: 0;
    opacity: 0;
    pointer-events: none;
    gap: 0;
}
.actions-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-right: 6px;
    background: #fff;
    border: 1px solid rgba(99, 102, 241, 0.40);
    border-radius: 6px;
    color: #4338ca;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
}
.actions-toggle:hover {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.35);
}
.actions-toggle.collapsed svg { transform: rotate(-90deg); }
.actions-toggle svg { transition: transform 0.2s ease; }

/* Breadcrumb */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.breadcrumb a {
    color: var(--text-secondary);
}

.breadcrumb a:hover {
    color: var(--color-primary);
}

.breadcrumb .separator {
    color: var(--text-muted);
}

.btn-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-left: 8px;
    background: transparent;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-copy:hover {
    background: var(--bg-hover);
    color: var(--color-primary);
    border-color: var(--color-primary);
}

/* ==========================================================================
   Filter Bar for Grid/List Views
   ========================================================================== */

/* Tag rule builder — sits between the All-Tags select and the sort select */
.tag-rule-builder {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    background: #fff;
    border: 1px solid rgba(99, 102, 241, 0.40);
    border-radius: 6px;
    flex-wrap: wrap;
    max-width: 50%;
}
.trb-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.trb-chips:empty { display: none; }
.trb-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 6px 2px 4px;
    border-radius: 11px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    border: 1.5px solid;
}
.trb-chip-sign {
    display: inline-flex; align-items: center; justify-content: center;
    width: 14px; height: 14px; border-radius: 50%;
    color: #fff; font-weight: 700; font-size: 11px;
}
.trb-chip-include { background: rgba(34, 197, 94, 0.14); border-color: #22c55e; color: #14532d; }
.trb-chip-include .trb-chip-sign { background: #22c55e; }
.trb-chip-exclude { background: rgba(239, 68, 68, 0.14); border-color: #ef4444; color: #7f1d1d; }
.trb-chip-exclude .trb-chip-sign { background: #ef4444; }
.trb-chip-remove {
    background: none; border: none; padding: 0; cursor: pointer;
    color: inherit; opacity: 0.6; font-size: 14px; line-height: 1;
    margin-left: 2px;
}
.trb-chip-remove:hover { opacity: 1; }
.trb-add { display: inline-flex; align-items: center; gap: 4px; }
.trb-tag-select {
    padding: 4px 8px;
    font-size: 12px;
    border: 1px solid rgba(99, 102, 241, 0.30);
    border-radius: 4px;
    background: #fff;
    color: #1f2937;
    min-width: 120px;
    max-width: 160px;
    cursor: pointer;
}
.trb-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
    border-radius: 4px;
    border: 1.5px solid;
    background: #fff;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    padding: 0;
}
.trb-btn-include { color: #16a34a; border-color: #16a34a; }
.trb-btn-include:hover { background: #16a34a; color: #fff; }
.trb-btn-exclude { color: #dc2626; border-color: #dc2626; }
.trb-btn-exclude:hover { background: #dc2626; color: #fff; }

.filter-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 16px;
    background: linear-gradient(135deg, #fef3c7 0%, #ecfeff 50%, #eef2ff 100%);
    border: 1px solid rgba(73, 75, 203, 0.25);
    border-radius: 10px;
    position: sticky;
    /* Stacks just below the sticky .content-header so both stay visible */
    top: 72px;
    z-index: 20;
    box-shadow: 0 2px 8px rgba(73, 75, 203, 0.10);
}

.filter-star-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    background: #fff;
    border: 1px solid rgba(245, 158, 11, 0.45);
    border-radius: 6px;
    color: #d97706;
    cursor: pointer;
    transition: all 0.15s ease;
}

.filter-star-btn:hover {
    color: #fff;
    background: linear-gradient(135deg, #f59e0b, #ec4899);
    border-color: transparent;
    box-shadow: 0 2px 6px rgba(236, 72, 153, 0.30);
}

.filter-star-btn.active {
    color: #fff;
    background: linear-gradient(135deg, #f59e0b, #ec4899);
    border-color: transparent;
    box-shadow: 0 2px 6px rgba(236, 72, 153, 0.35);
}

.filter-star-btn.active svg {
    fill: currentColor;
}

.filter-input {
    flex: 1;
    max-width: 220px;
    padding: 8px 14px;
    background: #fff;
    border: 1px solid rgba(99, 102, 241, 0.40);
    border-radius: 6px;
    color: #111827;
    font-size: 13px;
}

.filter-input::placeholder {
    color: rgba(67, 56, 202, 0.55);
}

.filter-input:focus {
    outline: none;
    border-color: #6366f1;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}

.filter-select {
    padding: 8px 12px;
    background: #fff;
    border: 1px solid rgba(14, 165, 233, 0.45);
    border-radius: 6px;
    color: #0c4a6e;
    font-size: 13px;
    cursor: pointer;
    min-width: 140px;
}

/* Sort select uses the violet/pink half of the palette */
#filter-sort.filter-select {
    border-color: rgba(139, 92, 246, 0.45);
    color: #5b21b6;
}

.filter-refresh-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    background: #fff;
    border: 1px solid rgba(20, 184, 166, 0.45);
    border-radius: 6px;
    color: #0d9488;
    cursor: pointer;
    transition: color var(--transition-fast), background var(--transition-fast), transform 0.4s ease, box-shadow 0.15s ease;
}

.filter-refresh-btn:hover {
    color: #fff;
    background: linear-gradient(135deg, #06b6d4, #0ea5e9);
    border-color: transparent;
    box-shadow: 0 2px 6px rgba(14, 165, 233, 0.35);
    transform: rotate(90deg);
}

.filter-select:hover {
    background: #f8fafc;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

#filter-tag.filter-select:focus {
    outline: none;
    border-color: #0ea5e9;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.18);
}

#filter-sort.filter-select:focus {
    outline: none;
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.18);
}

.filter-select option {
    background: #fff;
    color: #111827;
}

.filter-divider {
    width: 1px;
    height: 24px;
    background: rgba(255, 255, 255, 0.15);
    margin: 0 4px;
}

.canvas-selector {
    display: flex;
    align-items: center;
    gap: 8px;
}

.canvas-selector label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}

.btn-new-canvas {
    padding: 6px 12px;
    background: var(--color-primary);
    border: none;
    border-radius: 6px;
    color: white;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease;
    white-space: nowrap;
}

.btn-new-canvas:hover {
    background: var(--color-primary-light);
}

.modal-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-light);
}

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

/* ==========================================================================
   Shortcut-Style Story Layout (New Document Form)
   ========================================================================== */

.story-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 24px;
    margin-top: 16px;
}

.story-main {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: 12px;
    padding: 24px;
}

.story-title-input {
    width: 100%;
    padding: 12px 0;
    font-size: 24px;
    font-weight: 600;
    border: none;
    border-bottom: 2px solid var(--border-light);
    background: transparent;
    margin-bottom: 20px;
}

.story-title-input:focus {
    outline: none;
    border-bottom-color: var(--color-primary);
}

.story-title-input::placeholder {
    color: var(--text-muted);
}

/* Description Editor */
.description-toolbar {
    display: flex;
    gap: 4px;
    padding: 8px;
    background: var(--bg-hover);
    border: 1px solid var(--border-light);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
}

.description-toolbar button {
    padding: 6px 10px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.description-toolbar button:hover {
    background: white;
    border-color: var(--border-light);
    color: var(--text-primary);
}

.story-main textarea#description {
    width: 100%;
    min-height: 200px;
    padding: 16px;
    border: 1px solid var(--border-light);
    border-top: none;
    border-radius: 0 0 8px 8px;
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 14px;
    line-height: 1.6;
    resize: vertical;
}

.story-main textarea#description:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(73, 75, 203, 0.1);
}

/* Comments Section */
.comments-section {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--border-light);
}

.comments-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--text-primary);
}

.comments-list {
    margin-bottom: 16px;
}

.no-comments {
    color: var(--text-muted);
    font-style: italic;
    font-size: 14px;
    padding: 16px;
    background: var(--bg-hover);
    border-radius: 8px;
    text-align: center;
}

.comment-input-area {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.comment-input-area textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    font-size: 14px;
    resize: none;
}

.comment-input-area textarea:focus {
    outline: none;
    border-color: var(--color-primary);
}

.comment-input-area textarea:disabled {
    background: var(--bg-hover);
    cursor: not-allowed;
}

.comment-input-area button {
    align-self: flex-end;
}

/* Story Sidebar */
.story-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sidebar-field {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: 10px;
    padding: 16px;
}

.sidebar-field label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.sidebar-select,
.sidebar-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    font-size: 14px;
    background: white;
}

.sidebar-select:focus,
.sidebar-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(73, 75, 203, 0.1);
}

.tags-hint {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 6px;
}

.sidebar-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
    padding-top: 16px;
}

.btn-block {
    width: 100%;
    justify-content: center;
}

/* Responsive */
@media (max-width: 900px) {
    .story-layout {
        grid-template-columns: 1fr;
    }

    .story-sidebar {
        order: -1;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .sidebar-field {
        flex: 1;
        min-width: 200px;
    }

    .sidebar-actions {
        width: 100%;
        flex-direction: row;
    }

    .sidebar-actions .btn {
        flex: 1;
    }
}

/* ==========================================================================
   Search
   ========================================================================== */

.search-box {
    position: relative;
    flex-shrink: 1;
}

.search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--text-muted);
    pointer-events: none;
}

.search-box input {
    width: 280px;
    min-width: 120px;
    padding: 10px 12px 10px 40px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    font-size: 14px;
    background: white;
    transition: all var(--transition-fast);
}

@media (max-width: 1100px) {
    .search-box input {
        width: 180px;
    }
}

@media (max-width: 900px) {
    .search-box input {
        width: 140px;
    }
}

.search-box input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(73, 75, 203, 0.1);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
}

.btn svg {
    width: 18px;
    height: 18px;
}

.btn-primary {
    background: var(--color-primary);
    color: white;
}

.btn-primary:hover {
    background: var(--color-primary-dark);
    text-decoration: none;
}

.btn-secondary {
    background: white;
    color: var(--text-primary);
    border: 1px solid var(--border-light);
}

.btn-secondary:hover {
    background: var(--bg-hover);
    text-decoration: none;
}

.btn-danger {
    color: var(--color-error);
}

.btn-danger:hover {
    background: var(--color-error-bg);
}

.btn-icon {
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all var(--transition-fast);
}

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

.btn-icon.btn-danger:hover {
    background: var(--color-error-bg);
    color: var(--color-error);
}

.btn-icon svg {
    width: 18px;
    height: 18px;
}

/* Star button */
.btn-star {
    color: var(--text-secondary);
}

.btn-star:hover {
    color: #3b82f6;
}

.btn-star.starred {
    color: #3b82f6;
}

.btn-star.starred svg {
    fill: #3b82f6;
}

.btn-link {
    color: var(--color-primary);
    font-size: 13px;
    font-weight: 500;
}

.btn-back {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 14px;
    cursor: pointer;
    padding: 0;
}

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

.btn-back svg {
    width: 18px;
    height: 18px;
}

/* ==========================================================================
   Document Grid
   ========================================================================== */

.document-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}

.document-card {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: 12px;
    overflow: hidden;
    transition: all var(--transition-fast);
}

.document-card:hover {
    border-color: var(--color-primary-light);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

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

.card-actions {
    display: flex;
    gap: 4px;
}

.card-body {
    display: block;
    padding: 16px;
    text-decoration: none;
    color: inherit;
}

.card-body:hover {
    text-decoration: none;
}

.card-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
    line-height: 1.4;
}

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

.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-top: 1px solid var(--border-light);
    background: var(--bg-hover);
}

.card-date {
    font-size: 12px;
    color: var(--text-muted);
}

/* ==========================================================================
   Type Badges
   ========================================================================== */

.type-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 100px;
}

.type-badge.type-adr,
.type-adr {
    background: rgba(73, 75, 203, 0.1);
    color: var(--type-adr);
}

.type-badge.type-tech-design,
.type-tech-design {
    background: rgba(8, 145, 178, 0.1);
    color: var(--type-tech-design);
}

.type-badge.type-investigation,
.type-investigation {
    background: rgba(202, 138, 4, 0.1);
    color: var(--type-investigation);
}

.type-badge.type-runbook,
.type-runbook {
    background: rgba(22, 163, 74, 0.1);
    color: var(--type-runbook);
}

.type-badge.type-notes,
.type-notes {
    background: rgba(100, 116, 139, 0.1);
    color: var(--type-notes);
}

/* ==========================================================================
   Tags
   ========================================================================== */

.tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    font-size: 12px;
    color: var(--text-secondary);
    background: var(--bg-hover);
    border-radius: 4px;
    gap: 4px;
}
.tag.tag-removable {
    padding-right: 4px;
    transition: background 0.12s ease;
}
.tag.tag-removable:hover { background: rgba(99, 102, 241, 0.12); }
.tag .tag-remove {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; padding: 0; margin-left: 2px;
    background: transparent; border: none; border-radius: 3px;
    color: var(--text-secondary, #6b7280);
    cursor: pointer; opacity: 0; font-size: 14px; line-height: 1;
    transition: opacity 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.tag.tag-removable:hover .tag-remove { opacity: 0.7; }
.tag .tag-remove:hover {
    opacity: 1 !important; background: rgba(239, 68, 68, 0.18); color: #b91c1c;
}
.tag-add-btn {
    display: inline-flex; align-items: center;
    padding: 3px 9px;
    font-size: 12px;
    border: 1px dashed rgba(99, 102, 241, 0.45);
    background: transparent;
    border-radius: 4px;
    color: #4338ca;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.tag-add-btn:hover {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff; border-color: transparent;
    box-shadow: 0 1px 4px rgba(99, 102, 241, 0.30);
}
.tag-add-input-wrap { display: inline-flex; align-items: center; }
.tag-add-input-wrap[hidden] { display: none; }
.tag-add-input-wrap input {
    padding: 3px 8px;
    font-size: 12px;
    border: 1px solid rgba(99, 102, 241, 0.50);
    border-radius: 4px;
    min-width: 140px;
    color: #111827;
    background: #fff;
}
.tag-add-input-wrap input:focus {
    outline: none;
    border-color: #4338ca;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}

/* ==========================================================================
   Document Meta
   ========================================================================== */

.document-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    padding: 16px 0;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--border-light);
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-secondary);
}

.meta-item svg {
    width: 16px;
    height: 16px;
}

.meta-tags {
    display: flex;
    gap: 6px;
}

/* View Associations */
.view-associations {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.view-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--text-secondary);
}

.view-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.view-badge {
    display: inline-block;
    padding: 3px 10px;
    background: var(--color-primary);
    color: white;
    font-size: 12px;
    border-radius: 12px;
    text-decoration: none;
    transition: background 0.15s ease;
}

.view-badge:hover {
    background: var(--color-primary-light);
    text-decoration: none;
}

.view-none, .view-loading, .view-error {
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
}

.view-error {
    color: var(--color-error);
}

.view-manage-btn {
    background: none;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    padding: 4px 8px;
    cursor: pointer;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
}

.view-manage-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* View Manager Modal */
.view-manager-modal {
    max-width: 400px;
}

.modal-info {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.view-checklist {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 300px;
    overflow-y: auto;
}

.view-check-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-hover);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.view-check-item:hover {
    background: #e2e8f0;
}

.view-check-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--color-primary);
}

.view-check-item span {
    font-size: 14px;
    color: var(--text-primary);
}

/* ==========================================================================
   Document Content (Markdown)
   ========================================================================== */

.document-content {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: 12px;
    padding: 32px 40px;
    width: 100%;
    max-width: 1400px;
}

.markdown-body {
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-primary);
}

.markdown-body h1 {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 16px 0;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--border-light);
}

.markdown-body h2 {
    font-size: 22px;
    font-weight: 600;
    margin: 32px 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-light);
}

.markdown-body h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 24px 0 12px 0;
}

.markdown-body p {
    margin: 0 0 16px 0;
}

.markdown-body ul, .markdown-body ol {
    margin: 0 0 16px 0;
    padding-left: 24px;
}

.markdown-body li {
    margin: 6px 0;
}

.markdown-body hr {
    border: none;
    border-top: 3px solid var(--border-light);
    margin: 32px 0;
}

.markdown-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
}

.markdown-body th,
.markdown-body td {
    border: 1px solid var(--border-light);
    padding: 10px 14px;
    text-align: left;
}

.markdown-body th {
    background: var(--bg-hover);
    font-weight: 600;
}

.markdown-body code {
    background: #f6f8fa;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 13px;
}

.markdown-body pre {
    background: #1e1e2e;
    color: #cdd6f4;
    padding: 16px 20px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 16px 0;
}

.markdown-body pre code {
    background: none;
    padding: 0;
    color: inherit;
}

.markdown-body blockquote {
    border-left: 4px solid var(--color-primary);
    padding-left: 16px;
    margin: 16px 0;
    color: var(--text-secondary);
}

.markdown-body a {
    color: var(--color-primary);
}

.markdown-body strong {
    font-weight: 600;
}

/* ==========================================================================
   Forms
   ========================================================================== */

.edit-form,
.document-form {
    max-width: 900px;
}

.form-row {
    display: flex;
    gap: 16px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group-large {
    flex: 1;
}

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

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 10px 14px;
    font-size: 14px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: white;
    transition: all var(--transition-fast);
    font-family: inherit;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(73, 75, 203, 0.1);
}

.form-group textarea {
    resize: vertical;
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 13px;
    line-height: 1.6;
}

/* Markdown Toolbar */
.markdown-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-card);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    flex-wrap: wrap;
}

.markdown-toolbar + textarea {
    border-radius: 0 0 8px 8px;
}

.markdown-toolbar button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.15s ease;
}

.markdown-toolbar button:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.markdown-toolbar button:active {
    background: var(--border-light);
}

.markdown-toolbar button svg {
    flex-shrink: 0;
}

.toolbar-divider {
    width: 1px;
    height: 20px;
    background: var(--border-light);
    margin: 0 6px;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--border-light);
}

.form-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.selected-template {
    font-size: 13px;
    color: var(--text-secondary);
    background: var(--bg-hover);
    padding: 4px 12px;
    border-radius: 100px;
}

/* ==========================================================================
   Template Selector
   ========================================================================== */

.new-document-container {
    max-width: 900px;
}

.template-selector h2 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 8px;
}

.template-subtitle {
    color: var(--text-secondary);
    margin-bottom: 24px;
}

.template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.template-card {
    background: var(--bg-card);
    border: 2px solid var(--border-card);
    border-radius: 12px;
    padding: 20px;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: center;
}

.template-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(73, 75, 203, 0.15);
}

.template-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
    background: var(--bg-hover);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
}

.template-icon svg {
    width: 24px;
    height: 24px;
}

.template-icon-adr {
    background: rgba(73, 75, 203, 0.1);
    color: var(--type-adr);
}

.template-icon-tech {
    background: rgba(8, 145, 178, 0.1);
    color: var(--type-tech-design);
}

.template-icon-investigation {
    background: rgba(202, 138, 4, 0.1);
    color: var(--type-investigation);
}

.template-icon-runbook {
    background: rgba(22, 163, 74, 0.1);
    color: var(--type-runbook);
}

.template-icon-notes {
    background: rgba(100, 116, 139, 0.1);
    color: var(--type-notes);
}

.template-icon-todo {
    background: rgba(5, 150, 105, 0.1);
    color: #059669;
}

/* Todo builder on the /new page */
.todo-builder-hint {
    color: var(--text-muted, #6b7280);
    font-size: 12px;
    margin: 0 0 10px 0;
}
.todo-builder-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}
.todo-builder-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.todo-builder-bullet {
    color: var(--text-muted, #9ca3af);
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}
.todo-builder-input {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid var(--border-light, #d0d7de);
    border-radius: 4px;
    font-size: 13px;
    background: var(--card-bg, #fff);
}
.todo-builder-remove {
    background: none;
    border: none;
    color: var(--text-muted, #9ca3af);
    cursor: pointer;
    font-size: 16px;
    padding: 4px 8px;
    border-radius: 4px;
}
.todo-builder-remove:hover {
    background: rgba(215, 58, 73, 0.1);
    color: #d73a49;
}

.template-icon-sticky {
    background: rgba(217, 119, 6, 0.15);
    color: #d97706;
}

/* Sticky-note doc — colored card, compact */
.sticky-note {
    max-width: 560px;
    margin: 16px auto;
    padding: 22px 26px 18px;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
    transform: rotate(-0.3deg);
    position: relative;
    font-family: "Patrick Hand", "Caveat", "Segoe UI", system-ui, sans-serif;
}
.sticky-note h1, .sticky-note h2, .sticky-note h3 {
    border: none;
    padding-bottom: 0;
    margin-top: 14px;
}
.sticky-note .sticky-title {
    font-size: 20pt;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 10px;
}
.sticky-note p { font-size: 14pt; line-height: 1.35; }
.sticky-note ul, .sticky-note ol { font-size: 14pt; }
.sticky-note code { background: rgba(0, 0, 0, 0.08); }
.sticky-note pre { background: rgba(0, 0, 0, 0.08); }
.sticky-note .sticky-tags {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.sticky-note .sticky-tag {
    background: rgba(0, 0, 0, 0.12);
    color: rgba(0, 0, 0, 0.75);
    border-radius: 10px;
    font-size: 11px;
    padding: 2px 9px;
    font-family: "Inter", system-ui, sans-serif;
}

/* Inline sticky editor bits */
.sticky-note .sticky-title,
.sticky-note .sticky-body {
    outline: none;
    border-radius: 6px;
    padding: 4px 6px;
    min-height: 1em;
    transition: background 0.15s ease;
}
.sticky-note .sticky-title:hover,
.sticky-note .sticky-body:hover {
    background: rgba(0, 0, 0, 0.05);
}
.sticky-note .sticky-title:focus,
.sticky-note .sticky-body:focus {
    background: rgba(255, 255, 255, 0.45);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}
.sticky-note .sticky-body {
    white-space: pre-wrap;
    font-size: 14pt;
    line-height: 1.4;
    margin-bottom: 10px;
}
.sticky-note .sticky-title:empty::before,
.sticky-note .sticky-body:empty::before {
    content: attr(data-placeholder);
    opacity: 0.45;
}

.sticky-note .sticky-color-palette {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed rgba(0, 0, 0, 0.15);
    font-family: "Inter", system-ui, sans-serif;
}
.sticky-note .sticky-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, 0.2);
    cursor: pointer;
    padding: 0;
    transition: transform 0.1s ease, border-color 0.15s ease;
}
.sticky-note .sticky-dot:hover {
    transform: scale(1.15);
    border-color: rgba(0, 0, 0, 0.55);
}
.sticky-note .sticky-save-status {
    margin-left: auto;
    font-size: 11px;
    opacity: 0.55;
}
.sticky-note .sticky-save-status[data-kind="ok"]  { color: #0a6b3a; }
.sticky-note .sticky-save-status[data-kind="err"] { color: #b91c1c; opacity: 0.9; }

.sticky-yellow { background: #fff4a3; color: #3a2c00; }
.sticky-green  { background: #d0f2c2; color: #1d3b18; }
.sticky-blue   { background: #c8e0ff; color: #0d2a53; }
.sticky-pink   { background: #ffd3e3; color: #5a0e30; }
.sticky-orange { background: #ffd3a8; color: #4d2400; }
.sticky-purple { background: #e4cff9; color: #2e0f55; }

/* Canvas tile for a type:todo DOCUMENT — solid pastel card, dark text,
   readable regardless of the canvas background. */
.canvas-node.type-todo.canvas-todo-doc {
    background: #fff4a3;
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.22), 0 1px 2px rgba(0, 0, 0, 0.14);
    color: #1f2937 !important;
    width: 300px;
    min-width: 220px;
    min-height: 160px;
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 8px;
    resize: both;
    overflow: hidden;
}
.canvas-node.type-todo .todo-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    cursor: move; /* the empty space in the header row is the drag handle */
}
.canvas-node.type-todo .todo-title {
    font-weight: 700;
    /* Title tracks the item font-size + 2 px, so A− / A+ scale both. */
    font-size: calc(var(--todo-font-size, 15px) + 2px);
    outline: none;
    padding: 2px 4px;
    border-radius: 3px;
    cursor: text;
    flex: 0 1 auto;       /* shrink to content; don't fill the row */
    max-width: 60%;       /* cap so a long title still leaves room for buttons */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.canvas-node.type-todo .todo-actions {
    flex-shrink: 0;
    margin-left: auto; /* push action buttons to the right; the gap that
                          opens up between the title and the buttons is the
                          drag-grab area for moving the tile */
}
.canvas-node.type-todo .todo-title:hover { background: rgba(255, 255, 255, 0.18); }
.canvas-node.type-todo .todo-title:focus { background: #fff; color: #111827; caret-color: #111827; }
.canvas-node.type-todo .todo-actions {
    display: flex;
    gap: 4px;
}
.canvas-node.type-todo .todo-edit-btn,
.canvas-node.type-todo .todo-color-trigger,
.canvas-node.type-todo .todo-hide-done,
.canvas-node.type-todo .todo-font-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px;
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 5px;
    padding: 0;
    cursor: pointer;
    backdrop-filter: blur(2px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    font-family: inherit;
}
.canvas-node.type-todo .todo-edit-btn:hover,
.canvas-node.type-todo .todo-color-trigger:hover,
.canvas-node.type-todo .todo-hide-done:hover,
.canvas-node.type-todo .todo-font-btn:hover {
    background: rgba(255, 255, 255, 0.32);
    border-color: #fff;
    color: #fff;
}
.canvas-node.type-todo .todo-hide-done.on {
    background: rgba(99, 102, 241, 0.85);
    border-color: #c7d2fe;
    color: #fff;
}
.canvas-node.type-todo .todo-font-smaller { font-size: 11px; font-weight: 700; }
.canvas-node.type-todo .todo-font-larger  { font-size: 13px; font-weight: 700; }

/* Instant CSS tooltips for the todo tile nav buttons (native title= has
   a ~700ms delay which made the icons feel inscrutable). Triggered by
   `data-tip` so a button without a tip stays silent. */
.canvas-node.type-todo .todo-actions > [data-tip] {
    position: relative;
}
.canvas-node.type-todo .todo-actions > [data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 8px;
    background: #1f2937;
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.08s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    z-index: 100;
}
.canvas-node.type-todo .todo-actions > [data-tip]::before {
    content: '';
    position: absolute;
    top: calc(100% + 1px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-bottom-color: #1f2937;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.08s ease;
    z-index: 100;
}
.canvas-node.type-todo .todo-actions > [data-tip]:hover::after,
.canvas-node.type-todo .todo-actions > [data-tip]:hover::before {
    opacity: 1;
}
.canvas-node.type-todo .todo-edit-btn svg,
.canvas-node.type-todo .todo-hide-done svg,
.canvas-node.type-todo .todo-color-trigger svg { width: 16px; height: 16px; }
.canvas-node.type-todo .todo-color-pop {
    position: absolute; top: 32px; right: 8px; z-index: 10;
    display: flex; gap: 4px; padding: 6px;
    background: #fff; border: 1px solid rgba(0,0,0,0.18); border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}
.canvas-node.type-todo .todo-color-pop[hidden] { display: none; }
.canvas-node.type-todo .todo-color-dot-canvas {
    width: 18px; height: 18px; border-radius: 50%; border: 2px solid #fff;
    padding: 0; cursor: pointer; box-shadow: 0 0 0 1px rgba(0,0,0,0.20);
    transition: transform 0.1s ease;
}
.canvas-node.type-todo .todo-color-dot-canvas:hover { transform: scale(1.2); }
.canvas-node.type-todo .todo-items {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 4px;
    flex: 1 1 0;
    min-height: 0;
    max-height: none;
    padding: 0;
    overflow-y: auto !important;
    overflow-x: hidden;
    /* Hide scrollbars by default — only show fades + scrollbar when content overflows */
    scrollbar-width: none;
}
.canvas-node.type-todo .todo-items::-webkit-scrollbar { display: none; }
/* Fade hints — only render when the list overflows */
.canvas-node.type-todo .todo-items.has-overflow.show-bottom {
    mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent 100%);
}
.canvas-node.type-todo .todo-items.has-overflow.show-top.show-bottom {
    mask-image: linear-gradient(to bottom, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
}
.canvas-node.type-todo .todo-items.has-overflow.show-top:not(.show-bottom) {
    mask-image: linear-gradient(to bottom, transparent 0, #000 22px);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px);
}
.canvas-node.type-todo .todo-items.has-overflow { scrollbar-width: thin; }
.canvas-node.type-todo .todo-items.has-overflow::-webkit-scrollbar { display: block; width: 6px; }
.canvas-node.type-todo .todo-items.has-overflow::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.25); border-radius: 3px; }
.canvas-node.type-todo .todo-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--todo-font-size, 15px);
    line-height: 1.35;
    padding: 3px 0;
}
.canvas-node.type-todo .todo-item input[type="checkbox"] {
    width: 17px; height: 17px; cursor: pointer; flex-shrink: 0;
}
.canvas-node.type-todo .todo-item-text {
    flex: 1; outline: none; padding: 2px 4px; border-radius: 3px;
    font-size: var(--todo-font-size, 15px);
}
.canvas-node.type-todo .todo-item.todo-sub .todo-item-text {
    font-size: calc(var(--todo-font-size, 15px) - 1px);
}
.canvas-node.type-todo .todo-item-text:focus { background: #fff; color: #111827; caret-color: #111827; }
/* --- Sub-todo tree (canvas tile) --- */
.canvas-node.type-todo .todo-row { display: flex; flex-direction: column; }
.canvas-node.type-todo .todo-chev {
    background: rgba(0, 0, 0, 0.06); border: none; min-width: 18px; height: 18px;
    padding: 0 5px; border-radius: 4px;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 3px;
    color: rgba(0,0,0,0.65); font-size: 11px; font-weight: 600;
    flex-shrink: 0;
    transition: background 0.12s ease, color 0.12s ease;
}
.canvas-node.type-todo .todo-chev:hover { background: rgba(0, 0, 0, 0.18); color: #111827; }
.canvas-node.type-todo .todo-chev.expanded {
    background: transparent;
    color: rgba(0,0,0,0.45);
}
.canvas-node.type-todo .todo-chev.expanded:hover { background: rgba(0, 0, 0, 0.10); color: #111827; }
.canvas-node.type-todo .todo-chev.collapsed {
    background: #4338ca; color: #fff;
    box-shadow: 0 1px 3px rgba(67, 56, 202, 0.40);
}
.canvas-node.type-todo .todo-chev.collapsed:hover { background: #6366f1; color: #fff; }
.canvas-node.type-todo .todo-chev-count {
    font-size: 10px; font-weight: 700;
    line-height: 1;
}
.canvas-node.type-todo .todo-chev-spacer { display: inline-block; width: 16px; height: 16px; flex-shrink: 0; }
.canvas-node.type-todo .todo-add-sub {
    background: rgba(255,255,255,0.55); border: 1px solid rgba(0,0,0,0.18); border-radius: 3px;
    width: 18px; height: 18px; line-height: 1; padding: 0; cursor: pointer;
    color: #16a34a; font-size: 12px; flex-shrink: 0;
}
.canvas-node.type-todo .todo-add-sub:hover { background: #16a34a; color: #fff; border-color: #16a34a; }
.canvas-node.type-todo .todo-item.todo-sub {
    position: relative; padding-left: 44px;
    font-size: calc(var(--todo-font-size, 15px) - 1px);
}
.canvas-node.type-todo .todo-item.todo-sub::before {
    content: ""; position: absolute; left: 18px; top: -2px; bottom: 50%;
    border-left: 2px solid #4338ca;
}
.canvas-node.type-todo .todo-item.todo-sub::after {
    content: ""; position: absolute; left: 18px; top: 50%; width: 18px;
    border-top: 2px solid #4338ca;
}
.canvas-node.type-todo .todo-item.todo-sub .todo-sub-line { display: none; }
.canvas-node.type-todo .todo-drag-handle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 14px; cursor: grab; color: rgba(0,0,0,0.35);
    font-size: 14px; line-height: 1; user-select: none;
    flex-shrink: 0;
}
.canvas-node.type-todo .todo-drag-handle:active { cursor: grabbing; }
.canvas-node.type-todo .todo-item.todo-drag-source { opacity: 0.35; }
.canvas-node.type-todo .todo-item.todo-drag-over-top    { box-shadow: inset 0 2px 0 0 #4338ca; }
.canvas-node.type-todo .todo-item.todo-drag-over-bottom { box-shadow: inset 0 -2px 0 0 #4338ca; }
.canvas-node.type-todo .todo-item-text.done {
    text-decoration: line-through;
    opacity: 0.5;
}
.canvas-node.type-todo .todo-item-delete {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.45);
    color: #dc2626;
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 5px;
    flex-shrink: 0;
    transition: background 0.12s ease, color 0.12s ease, transform 0.1s ease;
}
.canvas-node.type-todo .todo-item-delete:hover {
    color: #fff;
    background: #ef4444;
    border-color: #ef4444;
    transform: scale(1.10);
}
/* Sub-tasks: same red affordance, slightly smaller so it doesn't overpower */
.canvas-node.type-todo .todo-item.todo-sub .todo-item-delete {
    width: 20px; height: 20px; font-size: 14px;
}
.canvas-node.type-todo .todo-add {
    display: flex; gap: 6px; margin-top: 6px;
}
.canvas-node.type-todo .todo-add-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 6px;
    background: #ffffff;
    color: #111 !important;
    font-size: 15px;
    font-family: inherit;
}
.canvas-node.type-todo .todo-add-input::placeholder {
    color: rgba(0, 0, 0, 0.5);
    opacity: 1;  /* Firefox dims placeholders by default */
}
.canvas-node.type-todo .todo-add-input:focus {
    outline: 2px solid rgba(59, 130, 246, 0.45);
    border-color: transparent;
}
.canvas-node.type-todo .todo-add-btn {
    background: #111;
    border: none;
    color: #fff;
    width: 30px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
}
.canvas-node.type-todo .todo-add-btn:hover { background: #000; }
.canvas-node.type-todo .todo-empty-small {
    color: rgba(0, 0, 0, 0.5);
    font-style: italic;
    font-size: 13px;
    padding: 6px 0;
}

/* Canvas tile + in-group card: sticky-note look */
.canvas-node.type-sticky,
.group-card.type-sticky {
    /* Override the default dark tile chrome: no header stripe, colored body,
       subtle lift so it feels like paper. */
    background: #fff4a3 !important;
    color: #3a2c00 !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.22), 0 1px 2px rgba(0, 0, 0, 0.18) !important;
    padding: 14px 14px 10px 14px !important;
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* Clip any body-text overflow so nothing bleeds past the card borders */
    overflow: hidden;
    transform: rotate(-0.4deg);
    font-family: "Patrick Hand", "Caveat", "Segoe UI", system-ui, sans-serif;
}
.canvas-node.type-sticky.sticky-green,
.group-card.type-sticky.sticky-green   { background: #d0f2c2 !important; color: #1d3b18 !important; }
.canvas-node.type-sticky.sticky-blue,
.group-card.type-sticky.sticky-blue    { background: #c8e0ff !important; color: #0d2a53 !important; }
.canvas-node.type-sticky.sticky-pink,
.group-card.type-sticky.sticky-pink    { background: #ffd3e3 !important; color: #5a0e30 !important; }
.canvas-node.type-sticky.sticky-orange,
.group-card.type-sticky.sticky-orange  { background: #ffd3a8 !important; color: #4d2400 !important; }
.canvas-node.type-sticky.sticky-purple,
.group-card.type-sticky.sticky-purple  { background: #e4cff9 !important; color: #2e0f55 !important; }

.sticky-tile-title {
    font-weight: 700;
    font-size: 15px;
    line-height: 1.25;
    margin-bottom: 2px;
}
.sticky-tile-body {
    font-size: 13px;
    line-height: 1.35;
    flex: 1 1 auto;
    min-height: 0;            /* allow flex shrink + overflow clip */
    max-height: 96px;         /* hard cap on in-card body height */
    opacity: 0.85;
    overflow: hidden;
    /* -webkit-box can misbehave inside flex-wrap group cards; fall back to
       max-height + overflow:hidden which always clips. */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    white-space: pre-wrap;
    text-overflow: ellipsis;
}
.sticky-tile-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

/* In-group sticky cards are smaller, so tighten the body clamp. */
.group-card.type-sticky .sticky-tile-body {
    max-height: 54px;
    -webkit-line-clamp: 3;
    font-size: 12px;
}
.sticky-tile-tags .tag {
    background: rgba(0, 0, 0, 0.12);
    color: inherit;
    border-radius: 10px;
    padding: 1px 8px;
    font-size: 10px;
    font-family: "Inter", system-ui, sans-serif;
}
.canvas-node.type-sticky .canvas-node-btn,
.group-card.type-sticky .group-card-link,
.group-card.type-sticky .group-card-remove {
    font-family: "Inter", system-ui, sans-serif;
}

.template-card h3 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 4px;
}

.template-card p {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
}

/* ==========================================================================
   Empty State
   ========================================================================== */

.empty-state {
    text-align: center;
    padding: 80px 40px;
    background: var(--bg-card);
    border: 2px dashed var(--border-light);
    border-radius: 12px;
}

.empty-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    color: var(--text-muted);
}

.empty-icon svg {
    width: 100%;
    height: 100%;
}

.empty-state h2 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}

.empty-state p {
    color: var(--text-secondary);
    margin-bottom: 24px;
}

/* ==========================================================================
   Error Page
   ========================================================================== */

.error-page {
    text-align: center;
    padding: 80px 40px;
}

.error-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    color: var(--color-error);
}

.error-icon svg {
    width: 100%;
    height: 100%;
}

.error-page h1 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 8px;
}

.error-page p {
    color: var(--text-secondary);
    margin-bottom: 24px;
}

/* ==========================================================================
   Toast Notifications
   ========================================================================== */

.toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    transition: all var(--transition-normal);
}

.toast.hidden {
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
}

.toast.success {
    background: var(--color-success);
    color: white;
}

.toast.error {
    background: var(--color-error);
    color: white;
}

/* ==========================================================================
   Utilities
   ========================================================================== */

.hidden {
    display: none !important;
}

/* ==========================================================================
   View Toggle
   ========================================================================== */

.view-toggle {
    display: flex;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 2px;
}

.view-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-muted);
    transition: all var(--transition-fast);
}

.view-btn:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.view-btn.active {
    color: var(--color-primary);
    background: rgba(73, 75, 203, 0.1);
}

.view-btn svg {
    width: 18px;
    height: 18px;
}

/* Colorful view-toggle (used on Documents header + each doc page) */
.view-toggle-colorful {
    background: linear-gradient(135deg, #eef2ff 0%, #ecfeff 50%, #fef3c7 100%);
    border: 1px solid rgba(73, 75, 203, 0.25);
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.view-toggle-colorful .view-btn { color: #4338ca; }
.view-toggle-colorful .view-btn.vt-grid:hover   { color: #fff; background: linear-gradient(135deg,#6366f1,#8b5cf6); }
.view-toggle-colorful .view-btn.vt-list:hover   { color: #fff; background: linear-gradient(135deg,#06b6d4,#0ea5e9); }
.view-toggle-colorful .view-btn.vt-canvas:hover { color: #fff; background: linear-gradient(135deg,#f59e0b,#ec4899); }
.view-toggle-colorful .view-btn.vt-grid.active   { color: #fff; background: linear-gradient(135deg,#6366f1,#8b5cf6); box-shadow: 0 2px 6px rgba(99,102,241,0.35); }
.view-toggle-colorful .view-btn.vt-list.active   { color: #fff; background: linear-gradient(135deg,#06b6d4,#0ea5e9); box-shadow: 0 2px 6px rgba(14,165,233,0.35); }
.view-toggle-colorful .view-btn.vt-canvas.active { color: #fff; background: linear-gradient(135deg,#f59e0b,#ec4899); box-shadow: 0 2px 6px rgba(236,72,153,0.35); }

/* Refresh button anchored next to the view-toggle nav */
.header-refresh-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    margin-left: 8px;
    background: #fff;
    border: 1px solid rgba(20, 184, 166, 0.45);
    border-radius: 8px;
    color: #0d9488;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease, transform 0.4s ease, box-shadow 0.15s ease;
}
.header-refresh-btn:hover {
    color: #fff;
    background: linear-gradient(135deg, #06b6d4, #0ea5e9);
    border-color: transparent;
    box-shadow: 0 2px 6px rgba(14, 165, 233, 0.35);
    transform: rotate(90deg);
}

/* ==========================================================================
   Document Container - Grid View (Default)
   ========================================================================== */

.document-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}

.document-container.view-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}

.document-container.view-grid .document-card {
    display: flex;
    flex-direction: column;
}

.document-container.view-grid .list-content {
    display: none;
}

/* ==========================================================================
   Document Container - List View
   ========================================================================== */

.document-container.view-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.document-container.view-list .document-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: 8px;
    padding: 0;
    overflow: hidden;
}

/* Zebra stripes — odd rows white, even rows a perceptibly deeper indigo-tinted
   gray so the pattern reads at a glance on long lists. Previous `#f6f8fa` was
   too close to white. `:nth-of-type(even)` (rather than `:nth-child`) keeps
   the pattern stable when filters/sorting reorder the rows. */
.document-container.view-list .document-card:nth-of-type(odd) {
    background: #ffffff;
}
.document-container.view-list .document-card:nth-of-type(even) {
    background: #e4e7ee;
    border-color: #cbd2dd;
}

.document-container.view-list .document-card:hover {
    border-color: var(--color-primary-light);
    background: var(--bg-hover);
}
.document-container.view-list .document-card:nth-of-type(even):hover {
    background: var(--bg-hover);
    border-color: var(--color-primary-light);
}

.document-container.view-list .card-header,
.document-container.view-list .card-body,
.document-container.view-list .card-footer {
    display: none;
}

.document-container.view-list .list-content {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 12px 16px;
    gap: 16px;
}

.list-content {
    display: none;
}

.list-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.list-icon svg {
    width: 20px;
    height: 20px;
}

.list-icon.type-adr {
    background: rgba(73, 75, 203, 0.1);
    color: var(--type-adr);
}

.list-icon.type-tech-design {
    background: rgba(8, 145, 178, 0.1);
    color: var(--type-tech-design);
}

.list-icon.type-investigation {
    background: rgba(202, 138, 4, 0.1);
    color: var(--type-investigation);
}

.list-icon.type-runbook {
    background: rgba(22, 163, 74, 0.1);
    color: var(--type-runbook);
}

.list-icon.type-notes {
    background: rgba(100, 116, 139, 0.1);
    color: var(--type-notes);
}

.list-main {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.list-main:hover {
    text-decoration: none;
}

.list-title {
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.list-type {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 100px;
    flex-shrink: 0;
}

.list-type.type-adr { background: rgba(73, 75, 203, 0.1); color: var(--type-adr); }
.list-type.type-tech-design { background: rgba(8, 145, 178, 0.1); color: var(--type-tech-design); }
.list-type.type-investigation { background: rgba(202, 138, 4, 0.1); color: var(--type-investigation); }
.list-type.type-runbook { background: rgba(22, 163, 74, 0.1); color: var(--type-runbook); }
.list-type.type-notes { background: rgba(100, 116, 139, 0.1); color: var(--type-notes); }

.list-tags {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    max-width: 200px;
    overflow: hidden;
}

.list-groups {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    min-width: 100px;
    max-width: 180px;
    overflow: hidden;
    align-items: center;
    flex-wrap: wrap;
}

.group-badge {
    display: inline-block;
    padding: 2px 8px;
    background: var(--color-primary);
    color: white;
    font-size: 11px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s ease;
    white-space: nowrap;
}

.group-badge:hover {
    background: var(--color-primary-light);
}

.add-group-btn {
    background: none;
    border: 1px dashed var(--border-light);
    border-radius: 10px;
    padding: 2px 10px;
    font-size: 11px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.add-group-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: rgba(73, 75, 203, 0.05);
}

.add-group-btn.small {
    padding: 2px 6px;
    min-width: 20px;
}

.groups-loading, .groups-error {
    font-size: 11px;
    color: var(--text-muted);
    font-style: italic;
}

.groups-error {
    color: var(--color-error);
}

/* Group Manager Modal */
.group-manager-modal {
    max-width: 350px;
}

.group-checklist {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 300px;
    overflow-y: auto;
}

.group-check-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-hover);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.group-check-item:hover {
    background: #e2e8f0;
}

.group-check-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--color-primary);
}

.group-check-item span {
    font-size: 14px;
    color: var(--text-primary);
}

.no-groups {
    font-size: 13px;
    color: var(--text-muted);
    text-align: center;
    padding: 20px;
}

.list-date {
    font-size: 13px;
    color: var(--text-muted);
    flex-shrink: 0;
    width: 120px;
    text-align: right;
}

.list-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

/* ==========================================================================
   Refresh Button
   ========================================================================== */

.btn-refresh {
    /* Match the .nav-item layout (Documents / Views / Integrations) so the
       Refresh row visually aligns with the rest of the sidebar nav. */
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    margin-top: 4px;
    margin-bottom: 4px;
    color: var(--text-sidebar);
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: inherit;
    text-align: left;
}

.btn-refresh:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-sidebar-active);
}

.btn-refresh svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.btn-refresh.spinning svg {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   Canvas View
   ========================================================================== */

.canvas-wrapper {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 48px);
    background: #1a1a2e;
    border-radius: 12px;
    overflow: hidden;
    /* Anchor the floating toolbar-toggle chevron to this box. Without
       this the chevron's `position: absolute` resolves up to <body> and
       lands somewhere off-screen / behind unrelated elements. */
    position: relative;
}

.canvas-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #16162a;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-wrap: wrap;
    gap: 8px;
    position: relative;
    z-index: 100;
    overflow: hidden;
    transition: max-height 0.25s ease, padding 0.25s ease, opacity 0.18s ease;
    max-height: 800px;
}
.canvas-wrapper.toolbar-hidden .canvas-toolbar {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-bottom-color: transparent;
    opacity: 0;
    pointer-events: none;
}

/* Floating chevron toggle in the top-right of the canvas wrapper. Sits above
   the toolbar when expanded and stays visible when collapsed (otherwise the
   user has no way to bring the toolbar back). */
.canvas-toolbar-toggle {
    position: absolute;
    top: 10px;
    right: 14px;
    z-index: 300;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(99, 102, 241, 0.30);
    border: 1.5px solid rgba(167, 139, 250, 0.60);
    border-radius: 8px;
    color: #ffffff;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.30), 0 0 0 1px rgba(0, 0, 0, 0.20);
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.25s ease, box-shadow 0.15s ease;
}
.canvas-toolbar-toggle:hover {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-color: #fff;
    color: #fff;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.55), 0 0 0 1px #fff;
    transform: translateY(-1px);
}
.canvas-toolbar-toggle svg { transition: transform 0.25s ease; }
/* When the toolbar is hidden, flip the chevron so it points down (= "open me"). */
.canvas-wrapper.toolbar-hidden .canvas-toolbar-toggle svg { transform: rotate(180deg); }
.canvas-wrapper.toolbar-hidden .canvas-toolbar-toggle {
    background: rgba(99, 102, 241, 0.30);
    border-color: rgba(99, 102, 241, 0.55);
    color: #fff;
}

.canvas-toolbar-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}

@media (max-width: 1400px) {
    .canvas-tool-btn span {
        display: none;
    }
    .canvas-tool-btn {
        padding: 8px;
    }
}

.canvas-tool-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.canvas-tool-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.canvas-tool-btn svg {
    width: 18px;
    height: 18px;
}

.zoom-level {
    padding: 0 8px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    min-width: 50px;
    text-align: center;
}

.canvas-hint {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    margin-right: 16px;
}

.canvas-container {
    flex: 1;
    position: relative;
    overflow: hidden;
    cursor: grab;
    background-color: #1a1a2e;
    background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    background-position: -1px -1px;
}

.canvas-container.panning {
    cursor: grabbing;
}

.canvas-content {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    width: 10000px;
    height: 10000px;
    background: transparent;
    /* This ensures the content area is clickable everywhere */
    pointer-events: auto;
}

/* Canvas Nodes */
.canvas-node {
    position: absolute;
    width: 240px;
    background: var(--bg-card);
    border: 2px solid var(--border-card);
    border-radius: 10px;
    overflow: visible;
    cursor: move;
    transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
    user-select: none;
    z-index: 10;
}

.canvas-node > * {
    overflow: hidden;
}

.canvas-node.in-group {
    display: none !important;
}

.canvas-node:hover {
    border-color: var(--color-primary-light);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.canvas-node.selected {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(73, 75, 203, 0.5), 0 8px 24px rgba(0, 0, 0, 0.3);
    background: linear-gradient(to bottom, rgba(73, 75, 203, 0.08), var(--bg-card));
}

.canvas-node.selected .canvas-node-header {
    background: rgba(73, 75, 203, 0.15);
}

.canvas-node.dragging {
    opacity: 0.85;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
    z-index: 1000;
    transform: rotate(2deg) scale(1.02);
    cursor: grabbing;
}

.canvas-node.drop-hover {
    border-color: #22c55e !important;
    box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.6), 0 12px 30px rgba(0, 0, 0, 0.4) !important;
    transform: scale(1.08);
    z-index: 5;
}

.canvas-node.drop-hover .canvas-node-header::before {
    content: 'Drop to group';
    position: absolute;
    top: -32px;
    left: 50%;
    transform: translateX(-50%);
    background: #22c55e;
    color: white;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    z-index: 100;
}

.canvas-node-header {
    position: relative;
}

.canvas-group.drop-hover {
    border-color: var(--color-primary);
    background: rgba(73, 75, 203, 0.2);
    box-shadow: 0 0 0 4px rgba(73, 75, 203, 0.3);
}

.canvas-node-header {
    padding: 8px 12px;
    background: var(--bg-hover);
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.canvas-node-remove {
    background: none;
    border: none;
    color: var(--text-muted, #9ca3af);
    font-size: 18px;
    line-height: 1;
    padding: 0 4px;
    cursor: pointer;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.canvas-node:hover .canvas-node-remove { opacity: 0.7; }
.canvas-node-remove:hover { color: #ef4444; background: rgba(239,68,68,0.10); opacity: 1 !important; }

.canvas-node-remove.sticky-remove {
    position: absolute; top: 4px; right: 6px;
    color: rgba(0,0,0,0.45);
}

/* Multi-select action bar — appears when ≥1 canvas tile is selected */
.canvas-selection-bar {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(17, 24, 39, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    z-index: 1000;
    color: #f9fafb;
    font-size: 13px;
}
.canvas-selection-bar[hidden] { display: none; }
.canvas-selection-bar .csb-count {
    font-weight: 600;
    color: #fbbf24;
    padding-right: 8px;
    border-right: 1px solid rgba(255, 255, 255, 0.15);
}
.canvas-selection-bar .csb-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    color: #f9fafb;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
}
.canvas-selection-bar .csb-btn:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.30);
}
.canvas-selection-bar .csb-btn-danger {
    background: #ef4444;
    border-color: #dc2626;
}
.canvas-selection-bar .csb-btn-danger:hover {
    background: #dc2626;
    border-color: #b91c1c;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.45);
}

.canvas-node.type-todo .todo-remove-from-view {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px;
    color: #fff;
    background: rgba(239, 68, 68, 0.30);
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 5px;
    padding: 0;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    backdrop-filter: blur(2px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.canvas-node.type-todo .todo-remove-from-view:hover {
    background: #ef4444;
    border-color: #ef4444;
    color: #fff;
}

.canvas-node-type {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 100px;
}

.canvas-node-type.type-adr { background: rgba(73, 75, 203, 0.1); color: var(--type-adr); }
.canvas-node-type.type-tech-design { background: rgba(8, 145, 178, 0.1); color: var(--type-tech-design); }
.canvas-node-type.type-investigation { background: rgba(202, 138, 4, 0.1); color: var(--type-investigation); }
.canvas-node-type.type-runbook { background: rgba(22, 163, 74, 0.1); color: var(--type-runbook); }
.canvas-node-type.type-notes { background: rgba(100, 116, 139, 0.1); color: var(--type-notes); }

.canvas-node-title {
    padding: 12px;
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
    line-height: 1.4;
}

.canvas-node-tags {
    padding: 0 12px 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.canvas-node-tags .tag {
    font-size: 11px;
    padding: 2px 6px;
}

.canvas-node-actions {
    padding: 8px 12px;
    border-top: 1px solid var(--border-light);
    background: var(--bg-hover);
}

.canvas-node-link {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-primary);
}

.canvas-node-link:hover {
    text-decoration: underline;
}

/* Canvas Groups */
.canvas-group {
    position: absolute;
    background: rgba(40, 40, 60, 0.95);
    border: 2px solid rgba(73, 75, 203, 0.5);
    border-radius: 12px;
    min-width: 200px;
    min-height: 150px;
    cursor: move;
    z-index: 1;
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(10px);
}

.canvas-group:hover {
    border-color: rgba(73, 75, 203, 0.7);
}

.canvas-group.dragging {
    opacity: 0.8;
}

.canvas-group.drop-target {
    outline: 3px dashed var(--color-primary);
    outline-offset: 4px;
    background: rgba(73, 75, 203, 0.1) !important;
}

.canvas-todo.dragging {
    opacity: 0.85;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
    z-index: 1000 !important;
    cursor: grabbing;
}

.canvas-group .resize-handle {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 20px;
    height: 20px;
    cursor: se-resize;
    background: linear-gradient(135deg, transparent 50%, rgba(73, 75, 203, 0.5) 50%);
    border-radius: 0 0 10px 0;
}

.canvas-group .resize-handle:hover {
    background: linear-gradient(135deg, transparent 50%, rgba(73, 75, 203, 0.8) 50%);
}

.canvas-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: rgba(73, 75, 203, 0.3);
    border-radius: 10px 10px 0 0;
    cursor: move;
    min-height: 36px;
}

.canvas-group-title-text {
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
    font-weight: 600;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.canvas-group-title-input {
    display: none;
    background: #ffffff;
    border: 2px solid var(--color-primary);
    border-radius: 4px;
    padding: 4px 8px;
    color: #1a1a1a;
    font-size: 13px;
    font-weight: 600;
    outline: none;
    flex: 1;
    min-width: 100px;
    z-index: 100;
}

.canvas-group-title-input:focus {
    border-color: var(--color-primary-light);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3);
}

.canvas-group-edit {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    margin-left: 4px;
    z-index: 10;
}

.canvas-group-edit:hover {
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.2);
}

.canvas-group-edit svg {
    pointer-events: none;
}

.canvas-tool-btn-primary {
    background: var(--color-primary) !important;
    color: white !important;
}

.canvas-tool-btn-primary:hover {
    background: var(--color-primary-light) !important;
}

.canvas-group-fit {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    margin-left: 4px;
}

.canvas-group-fit:hover {
    color: rgba(255, 255, 255, 1);
    background: rgba(255, 255, 255, 0.12);
}

.canvas-group-color {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    margin-left: 4px;
}

.canvas-group-color:hover {
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.1);
}

.canvas-group-color-picker {
    position: absolute;
    top: 40px;
    left: 10px;
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: 8px;
    padding: 8px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    max-width: 200px;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.color-swatch {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.1s ease;
}

.color-swatch:hover {
    transform: scale(1.15);
    border-color: white;
}

/* ==========================================================================
   Inline Editing
   ========================================================================== */
.editable-header {
    cursor: pointer;
    transition: color 0.15s ease;
}

.editable-header:hover {
    color: var(--color-primary);
}

.editable-header::after {
    content: ' ✎';
    font-size: 0.6em;
    opacity: 0;
    transition: opacity 0.15s ease;
    color: var(--color-primary);
}

.editable-header:hover::after {
    opacity: 0.6;
}

/* History modal */
.history-modal { width: 640px; max-width: 92vw; }
.history-list { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow-y: auto; }
.history-row {
    padding: 10px 12px;
    border: 1px solid var(--border-light, #d0d7de);
    border-radius: 6px;
    background: var(--card-bg, #fff);
}
.history-meta {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--text-muted, #57606a);
}
.history-ts { font-family: "SF Mono", Menlo, Consolas, monospace; }
.history-action { font-weight: 500; color: var(--text, #24292f); }
.history-size { color: var(--text-muted, #57606a); }
.history-message { font-size: 12px; color: var(--text-muted, #57606a); margin-top: 4px; }
.history-row-actions { margin-top: 6px; text-align: right; }
.history-empty, .history-loading { padding: 24px; text-align: center; color: var(--text-muted, #6b7280); }

.actor-badge {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 2px 8px;
    border-radius: 10px;
    border: 1px solid transparent;
}
.actor-badge.actor-user   { background: #eef4ff; color: #2449a8; border-color: #c8d6f5; }
.actor-badge.actor-claude { background: #ffe9d6; color: #a24e00; border-color: #f5c89a; }
.actor-badge.actor-codex  { background: #d6f4e6; color: #0a6b3a; border-color: #8fd9b2; }
.actor-badge.actor-other  { background: #eee; color: #555; border-color: #ccc; }

.section-rename-btn,
.section-delete-btn {
    background: transparent;
    border: none;
    padding: 4px;
    margin-left: 6px;
    vertical-align: middle;
    cursor: pointer;
    color: var(--text-secondary, #57606a);
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
}

.editable-header:hover .section-rename-btn,
.editable-header:hover .section-delete-btn {
    opacity: 0.6;
}

.section-rename-btn:hover {
    opacity: 1 !important;
    color: #0969da;
    background: rgba(9, 105, 218, 0.1);
}

.section-delete-btn:hover {
    opacity: 1 !important;
    color: #d73a49;
    background: rgba(215, 58, 73, 0.1);
}

.editable-section {
    cursor: pointer;
    padding: 8px;
    margin: -8px;
    border-radius: 8px;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.editable-section:hover:not(.editing) {
    background: rgba(99, 102, 241, 0.05);
}

.editable-section.editing {
    background: rgba(99, 102, 241, 0.1);
    outline: 2px solid var(--color-primary);
    cursor: text;
}

.inline-edit-toolbar {
    position: absolute;
    display: flex;
    gap: 8px;
    padding: 8px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
}

.inline-edit-toolbar.hidden {
    display: none;
}

.toolbar-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.15s ease;
}

.toolbar-btn.save-btn {
    background: var(--color-primary);
    color: white;
}

.toolbar-btn.save-btn:hover {
    background: var(--color-primary-light);
}

.toolbar-btn.cancel-btn {
    background: var(--bg-hover);
    color: var(--text-secondary);
}

.toolbar-btn.cancel-btn:hover {
    background: var(--border-light);
    color: var(--text-primary);
}

.fmt-group { display: flex; gap: 4px; align-items: center; }
.fmt-divider {
    width: 1px;
    align-self: stretch;
    background: var(--border-light, #d0d7de);
    margin: 4px 2px;
}
.fmt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 28px;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: var(--text-primary, #24292f);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    line-height: 1;
}
.fmt-btn:hover {
    background: var(--bg-hover, #f6f8fa);
    border-color: var(--border-light, #d0d7de);
}
.fmt-btn:active { background: var(--border-light, #d0d7de); }
.fmt-btn code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    background: transparent;
    padding: 0;
}
.inline-edit-toolbar {
    flex-wrap: wrap;
    align-items: center;
}

/* ==========================================================================
   Save View Modal
   ========================================================================== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.modal-overlay.visible {
    display: flex;
}

.modal-content {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: 12px;
    width: 400px;
    max-width: 90vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

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

.modal-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.modal-close {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.modal-close:hover {
    color: var(--text-primary);
}

.modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid var(--border-light);
}

.form-group {
    margin-bottom: 20px;
}

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

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

.form-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

.existing-views-section label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.existing-views-list {
    background: var(--bg-hover);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    max-height: 200px;
    overflow-y: auto;
}

.existing-view-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-light);
    transition: background 0.15s ease;
}

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

.existing-view-item:hover {
    background: rgba(99, 102, 241, 0.1);
}

.existing-view-item.current {
    background: rgba(99, 102, 241, 0.15);
}

.existing-view-item .view-name {
    font-size: 14px;
    color: var(--text-primary);
}

.existing-view-item .current-badge {
    font-size: 11px;
    color: var(--color-primary);
    background: rgba(99, 102, 241, 0.2);
    padding: 2px 8px;
    border-radius: 10px;
}

.no-views {
    padding: 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

/* ==========================================================================
   Quick Edit Modal
   ========================================================================== */
.quick-edit-modal {
    width: 700px;
    max-width: 90vw;
    height: 500px;
    max-height: 80vh;
}

.quick-edit-title-section {
    display: flex;
    align-items: center;
    gap: 10px;
}

.quick-edit-title-section h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.quick-edit-modal .modal-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0;
    min-height: 0;
}

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

.quick-edit-textarea:focus {
    outline: none;
}

.quick-edit-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-muted);
    font-size: 14px;
}

.quick-edit-modal .modal-footer {
    justify-content: space-between;
    align-items: center;
}

.quick-edit-footer-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.quick-edit-footer-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.quick-edit-shortcuts {
    display: flex;
    gap: 12px;
}

.shortcut-hint {
    font-size: 11px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 3px;
}

.shortcut-hint kbd {
    background: var(--bg-hover);
    border: 1px solid var(--border-light);
    border-radius: 3px;
    padding: 1px 5px;
    font-family: inherit;
    font-size: 10px;
    color: var(--text-secondary);
}

.quick-edit-status {
    font-size: 12px;
    color: var(--text-muted);
    min-width: 80px;
}

.quick-edit-status.saving {
    color: var(--color-primary);
}

.quick-edit-status.saved {
    color: var(--color-success);
}

.quick-edit-status.error {
    color: var(--color-error);
}

.quick-edit-modal .btn svg {
    margin-right: 6px;
    vertical-align: -2px;
}

.canvas-node-btn {
    background: var(--color-primary);
    color: white;
    border: none;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease;
}

.canvas-node-btn:hover {
    background: var(--color-primary-light);
}

.canvas-group-delete {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 18px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

.canvas-group-delete:hover {
    color: var(--color-error);
}

.resize-handle {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 20px;
    height: 20px;
    cursor: se-resize;
    background: linear-gradient(135deg, transparent 50%, rgba(73, 75, 203, 0.5) 50%);
    border-radius: 0 0 10px 0;
}

.resize-handle:hover {
    background: linear-gradient(135deg, transparent 50%, var(--color-primary) 50%);
}


.canvas-group-header:hover {
    background: rgba(73, 75, 203, 0.5);
}

.canvas-group-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px;
    overflow: auto;
    max-height: calc(100% - 45px);
}

/* Cards inside groups */
.group-card {
    width: 160px;
    height: 90px;
    background: var(--bg-card);
    border: 2px solid var(--border-card);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.group-card:hover {
    border-color: var(--color-primary-light);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.group-card-header {
    padding: 4px 8px;
    background: var(--bg-hover);
    border-bottom: 1px solid var(--border-light);
}

.group-card-type {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 6px;
    border-radius: 100px;
}

.group-card-type.type-adr { background: rgba(73, 75, 203, 0.1); color: var(--type-adr); }
.group-card-type.type-tech-design { background: rgba(8, 145, 178, 0.1); color: var(--type-tech-design); }
.group-card-type.type-investigation { background: rgba(202, 138, 4, 0.1); color: var(--type-investigation); }
.group-card-type.type-runbook { background: rgba(22, 163, 74, 0.1); color: var(--type-runbook); }
.group-card-type.type-notes { background: rgba(100, 116, 139, 0.1); color: var(--type-notes); }

.group-card-title {
    padding: 6px 8px;
    font-weight: 600;
    font-size: 11px;
    color: var(--text-primary);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.group-card-actions {
    padding: 4px 8px;
    background: var(--bg-hover);
    border-top: 1px solid var(--border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
}

.group-card-link {
    font-size: 11px;
    font-weight: 500;
    color: var(--color-primary);
}

.group-card-remove {
    font-size: 10px;
    color: var(--text-muted);
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
}

.group-card-remove:hover {
    color: var(--color-error);
    background: var(--color-error-bg);
}

/* ==========================================================================
   Canvas Background Picker
   ========================================================================== */

/* Canvas Toolbar Layout */
.canvas-toolbar-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 16px;
    flex-wrap: wrap;
}

.toolbar-divider {
    width: 1px;
    height: 24px;
    background: rgba(255, 255, 255, 0.15);
    margin: 0 8px;
}

/* Canvas Views Section */
.canvas-views-section {
    display: flex;
    align-items: center;
    gap: 8px;
}

.canvas-select {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.9);
    padding: 6px 10px;
    font-size: 13px;
    cursor: pointer;
    min-width: 120px;
}

.canvas-select:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
}

.canvas-select:focus {
    outline: none;
    border-color: var(--color-primary);
}

.canvas-select option {
    background: #1a1a2e;
    color: white;
}

/* Canvas Filter Section */
.canvas-filter-section {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

@media (max-width: 1200px) {
    .canvas-select {
        min-width: 90px;
    }
    .canvas-search-input {
        width: 120px;
    }
}

@media (max-width: 900px) {
    .canvas-filter-section {
        display: none;
    }
}

.canvas-search-input {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: white;
    padding: 6px 12px;
    font-size: 13px;
    width: 160px;
}

.canvas-search-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.canvas-search-input:focus {
    outline: none;
    border-color: var(--color-primary);
    background: rgba(255, 255, 255, 0.1);
}

.canvas-tool-btn-danger {
    color: rgba(255, 100, 100, 0.8);
}

.canvas-tool-btn-danger:hover {
    background: rgba(255, 100, 100, 0.2);
    color: #ff6b6b;
}

/* Save Dropdown */
.canvas-save-dropdown {
    position: relative;
    overflow: visible;
}

.save-menu {
    display: none;
    position: fixed;
    margin-top: 4px;
    background: rgba(30, 30, 40, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 4px;
    min-width: 120px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    z-index: 9999;
}

.save-menu.open {
    display: block;
}

.save-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    cursor: pointer;
    border-radius: 4px;
    text-align: left;
}

.save-menu-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

.save-menu-item:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.save-menu-item:disabled:hover {
    background: transparent;
}

.canvas-bg-picker {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
}

.bg-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    margin-right: 4px;
}

.bg-swatch {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: all 0.15s ease;
}

.bg-swatch:hover {
    transform: scale(1.15);
    border-color: rgba(255, 255, 255, 0.5);
}

.bg-color-input {
    width: 24px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
}

.bg-color-input::-webkit-color-swatch-wrapper {
    padding: 2px;
}

.bg-color-input::-webkit-color-swatch {
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 3px;
}

/* ==========================================================================
   Todo Widget
   ========================================================================== */

.canvas-todo {
    position: absolute;
    min-width: 200px;
    max-width: 400px;
    background: rgba(250, 204, 21, 0.2);
    border: 2px solid rgba(250, 204, 21, 0.6);
    border-radius: 8px;
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.todo-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    cursor: move;
}

.todo-title {
    flex: 1;
    font-weight: 600;
    font-size: 14px;
    color: #fff;
    cursor: text;
}

.todo-title-input {
    flex: 1;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

.todo-actions {
    display: flex;
    gap: 4px;
}

.todo-edit-btn, .todo-color-btn, .todo-delete-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    font-size: 16px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.todo-edit-btn:hover, .todo-color-btn:hover, .todo-delete-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.todo-items {
    padding: 8px 12px;
    max-height: 300px;
    overflow-y: auto;
}

.todo-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

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

.todo-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #22c55e;
}

.todo-item-text {
    flex: 1;
    font-size: 13px;
    color: #ddd;
    cursor: text;
    word-break: break-word;
}

.todo-item-text.done {
    text-decoration: line-through;
    color: #888;
}

.todo-item-edit {
    flex: 1;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 13px;
    color: #111827;
}

.todo-item-delete {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    font-size: 16px;
    padding: 2px 6px;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.todo-item:hover .todo-item-delete {
    opacity: 1;
}

.todo-item-delete:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.todo-add {
    display: flex;
    gap: 8px;
    padding: 8px 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.todo-add-input {
    flex: 1;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 13px;
    color: #fff;
}

.todo-add-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.todo-add button {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.todo-add button:hover {
    background: rgba(255, 255, 255, 0.2);
}

.todo-color-picker {
    display: flex;
    gap: 6px;
    padding: 8px 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    flex-wrap: wrap;
}

.canvas-tool-btn-save {
    background: rgba(99, 102, 241, 0.30) !important;
    border-color: rgba(99, 102, 241, 0.60) !important;
    color: #fff !important;
    font-weight: 600;
}
.canvas-tool-btn-save:hover {
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    border-color: transparent !important;
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.45);
}
.autosave-indicator {
    display: inline-flex; align-items: center; padding: 0 10px;
    font-size: 11px; color: rgba(255,255,255,0.55); white-space: nowrap;
    border-left: 1px solid rgba(255,255,255,0.10); margin-left: 4px;
    transition: color 0.2s ease;
}
.autosave-indicator[data-state="saving"] { color: #fbbf24; }
.autosave-indicator[data-state="saved"]  { color: #10b981; }
.autosave-indicator[data-state="error"]  { color: #ef4444; }

.canvas-tool-btn-todo {
    background: rgba(250, 204, 21, 0.2) !important;
    border-color: rgba(250, 204, 21, 0.4) !important;
}

.canvas-tool-btn-todo:hover {
    background: rgba(250, 204, 21, 0.3) !important;
}

.canvas-tool-btn-canvas {
    background: rgba(34, 197, 94, 0.2) !important;
    border-color: rgba(34, 197, 94, 0.4) !important;
}

.canvas-tool-btn-canvas:hover {
    background: rgba(34, 197, 94, 0.3) !important;
}

.canvas-tool-btn-docs {
    background: rgba(59, 130, 246, 0.2) !important;
    border-color: rgba(59, 130, 246, 0.4) !important;
}

.canvas-tool-btn-docs:hover {
    background: rgba(59, 130, 246, 0.3) !important;
}

.canvas-tool-btn-rules {
    background: rgba(168, 85, 247, 0.2) !important;
    border-color: rgba(168, 85, 247, 0.4) !important;
}
.canvas-tool-btn-rules:hover {
    background: rgba(168, 85, 247, 0.3) !important;
}

.canvas-tool-btn-autogroup {
    background: rgba(20, 184, 166, 0.2) !important;
    border-color: rgba(20, 184, 166, 0.4) !important;
}
.canvas-tool-btn-autogroup:hover {
    background: rgba(20, 184, 166, 0.3) !important;
}
.canvas-tool-btn.canvas-tool-btn-active {
    background: rgba(20, 184, 166, 0.55) !important;
    border-color: rgba(20, 184, 166, 0.85) !important;
    color: #fff !important;
    box-shadow: 0 0 0 1px rgba(20, 184, 166, 0.6) inset;
}

/* ==========================================================================
   View Rules Modal
   ========================================================================== */
.view-rules-modal {
    width: 640px;
    max-width: 92vw;
    max-height: 86vh;
    display: flex;
    flex-direction: column;
}
.view-rules-modal .modal-body {
    overflow-y: auto;
    padding: 20px 24px;
}
.vr-help {
    font-size: 13px;
    color: var(--text-muted, #6b7280);
    margin: 0 0 16px 0;
}
.vr-section {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px dashed var(--border-light, #e5e7eb);
}
.vr-section:last-of-type { border-bottom: 0; }
.vr-label {
    display: block;
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary, #111827);
    margin-bottom: 8px;
}
.vr-hint {
    font-weight: 400;
    font-size: 12px;
    color: var(--text-muted, #6b7280);
}
.vr-empty {
    color: var(--text-muted, #9ca3af);
    font-size: 12px;
    font-style: italic;
}
.vr-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 28px;
    margin-bottom: 8px;
}
.vr-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 4px 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    line-height: 1;
}
.vr-chip-include {
    background: rgba(59, 130, 246, 0.15);
    color: #1e3a8a;
    border: 1px solid rgba(59, 130, 246, 0.4);
}
.vr-chip-exclude {
    background: rgba(239, 68, 68, 0.15);
    color: #7f1d1d;
    border: 1px solid rgba(239, 68, 68, 0.4);
}
.vr-chip-x {
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    font-size: 14px;
    padding: 0 6px;
    line-height: 1;
    border-radius: 50%;
}
.vr-chip-x:hover { background: rgba(0, 0, 0, 0.1); }
.vr-add-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.vr-add-row select {
    flex: 1;
    padding: 6px 8px;
    border: 1px solid var(--border-light, #d0d7de);
    border-radius: 4px;
    background: var(--card-bg, #fff);
    font-size: 13px;
}
.vr-date-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}
.vr-date-row select,
.vr-date-row input[type="date"] {
    padding: 6px 8px;
    border: 1px solid var(--border-light, #d0d7de);
    border-radius: 4px;
    background: var(--card-bg, #fff);
    font-size: 13px;
}
.vr-match-count {
    font-size: 13px;
    color: var(--text-muted, #6b7280);
    background: var(--bg-hover, #f6f8fa);
    padding: 10px 12px;
    border-radius: 6px;
    margin-top: 8px;
}

/* ==========================================================================
   Add Documents Modal
   ========================================================================== */

.add-docs-modal {
    max-width: 600px;
    max-height: 80vh;
}

.add-docs-search {
    margin-bottom: 12px;
}

.add-docs-search input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    font-size: 14px;
}

.add-docs-actions {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.btn-sm {
    padding: 4px 12px;
    font-size: 12px;
    background: var(--bg-hover);
    border: 1px solid var(--border-light);
    border-radius: 4px;
    cursor: pointer;
}

.btn-sm:hover {
    background: var(--border-light);
}

.doc-checklist {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    background: var(--bg-card);
}

.doc-check-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-light);
    cursor: pointer;
    transition: background var(--transition-fast);
}

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

.doc-check-item:hover {
    background: var(--bg-hover);
}

.doc-check-item.on-canvas {
    background: rgba(73, 75, 203, 0.05);
    opacity: 0.7;
}

.doc-check-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.doc-check-item .doc-title {
    flex: 1;
    font-weight: 500;
}

.doc-check-item .doc-type {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--bg-hover);
}

.doc-check-item .on-canvas-badge {
    font-size: 10px;
    color: var(--color-primary);
    background: rgba(73, 75, 203, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
}

.modal-footer #docs-selected-count {
    margin-right: auto;
    color: var(--text-secondary);
    font-size: 13px;
}

/* ==========================================================================
   Canvas Empty State
   ========================================================================== */

.canvas-empty-state {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    pointer-events: auto;
}

.canvas-empty-state .empty-state-content {
    background: rgba(0, 0, 0, 0.3);
    padding: 40px 60px;
    border-radius: 12px;
    border: 2px dashed rgba(255, 255, 255, 0.2);
}

.canvas-empty-state svg {
    opacity: 0.5;
    margin-bottom: 16px;
}

.canvas-empty-state h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.8);
}

.canvas-empty-state p {
    font-size: 14px;
    margin-bottom: 20px;
    color: rgba(255, 255, 255, 0.5);
}

.canvas-empty-state .btn {
    padding: 10px 24px;
    font-size: 14px;
}

/* ==========================================================================
   Tag Editor Modal
   ========================================================================== */

.tag-editor-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(4px);
}

.tag-editor-content {
    background: var(--bg-card);
    border-radius: 12px;
    width: 400px;
    max-width: 90vw;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.tag-editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: var(--bg-hover);
    border-bottom: 1px solid var(--border-light);
}

.tag-editor-header h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.tag-editor-close {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--text-muted);
    cursor: pointer;
    line-height: 1;
    padding: 0;
}

.tag-editor-close:hover {
    color: var(--text-primary);
}

.tag-editor-doc-title {
    padding: 12px 20px;
    font-size: 14px;
    color: var(--text-secondary);
    background: var(--bg-hover);
    border-bottom: 1px solid var(--border-light);
}

.tag-editor-body {
    padding: 20px;
}

.tag-editor-current {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 40px;
    padding: 12px;
    background: var(--bg-hover);
    border-radius: 8px;
    margin-bottom: 16px;
}

.tag-editor-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--color-primary);
    color: white;
    border-radius: 100px;
    font-size: 13px;
}

.tag-remove {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0;
}

.tag-remove:hover {
    color: white;
}

.no-tags {
    color: var(--text-muted);
    font-size: 13px;
    font-style: italic;
}

.tag-editor-input-row {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.tag-editor-input-row input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    font-size: 14px;
}

.tag-editor-input-row input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(73, 75, 203, 0.1);
}

.btn-sm {
    padding: 8px 16px;
    font-size: 13px;
}

.tag-suggestions {
    margin-top: 12px;
}

.suggestions-label {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.suggestions-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tag-suggestion {
    padding: 4px 10px;
    background: var(--bg-hover);
    border: 1px solid var(--border-light);
    border-radius: 100px;
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.tag-suggestion:hover {
    background: rgba(73, 75, 203, 0.1);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.tag-editor-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 20px;
    background: var(--bg-hover);
    border-top: 1px solid var(--border-light);
}

/* Clickable tags in canvas nodes */
.canvas-node-tags {
    cursor: pointer;
    transition: background 0.15s ease;
    border-radius: 4px;
    margin: 0 8px;
    padding: 4px;
}

.canvas-node-tags:hover {
    background: rgba(73, 75, 203, 0.1);
}

.add-tag-hint {
    font-size: 11px;
    color: var(--text-muted);
    font-style: italic;
}

.canvas-node-tags:hover .add-tag-hint {
    color: var(--color-primary);
}

/* Selection Box */
.selection-box {
    position: absolute;
    border: 2px solid var(--color-primary);
    background: rgba(73, 75, 203, 0.15);
    pointer-events: none;
    z-index: 1000;
    display: none;
}

.canvas-node.selection-hover {
    border-color: var(--color-primary-light);
    box-shadow: 0 0 0 3px rgba(73, 75, 203, 0.3);
    background: rgba(73, 75, 203, 0.05);
}

/* Multi-drag visual feedback */
.canvas-node.dragging.selected {
    opacity: 0.9;
    box-shadow: 0 0 0 4px rgba(73, 75, 203, 0.6), 0 16px 40px rgba(0, 0, 0, 0.4);
}

/* ==========================================================================
   Claude Prompts Section
   ========================================================================== */

.prompts-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.prompts-date-label {
    font-size: 11px;
    color: #888;
    margin-left: 6px;
    font-weight: normal;
}

.prompts-separator {
    color: #444;
    font-size: 12px;
    margin: 0 2px;
}

.prompts-day-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    margin-bottom: 8px;
}

.day-nav-btn {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #aaa;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.day-nav-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.day-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.current-day {
    flex: 1;
    text-align: center;
    font-size: 12px;
    color: #ccc;
    font-weight: 500;
}

.archive-btn {
    background: rgba(139, 92, 246, 0.2);
    border: none;
    color: #a78bfa;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
}

.archive-btn:hover {
    background: rgba(139, 92, 246, 0.3);
}

.prompts-loading {
    text-align: center;
    color: #888;
    padding: 20px;
    font-size: 12px;
}

.prompt-time {
    font-size: 10px;
    color: #666;
}

.archives-list {
    max-height: 300px;
    overflow-y: auto;
    margin: 12px 0;
}

.archive-item {
    display: flex;
    justify-content: space-between;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    margin-bottom: 6px;
    cursor: pointer;
}

.archive-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

.archive-week {
    font-weight: 500;
    color: #ddd;
}

.archive-count {
    color: #888;
    font-size: 12px;
}

.prompts-list {
    flex: 1;
    overflow-y: auto;
    max-height: 500px;
    padding-right: 4px;
}

/* ---- Agents (active Claude sessions) ---- */
.agents-list {
    display: flex; flex-direction: column;
    gap: 6px;
    overflow-y: auto;
    /* Generous default — the user can drag the divider below to grow further;
       the JS resize handler keeps the inline max-height in sync with the
       viewport so the list can stretch all the way to the footer. */
    max-height: 480px;
    padding-right: 4px;
}
.agents-empty {
    color: rgba(255, 255, 255, 0.45);
    font-size: 11px;
    font-style: italic;
    padding: 6px 4px;
}
/* Top-pinned Agents section gets a subtle bottom divider so it reads as
   its own zone above the main nav (Documents / New / Existing / Views / …). */
.agents-section-top {
    padding-bottom: 0;
}
/* The generic .section-content rule caps every collapsible section at
   max-height: 500px with overflow:hidden — that visually clips the agents
   list when the user drags the divider taller. Lift the cap (and overflow)
   for the agents section so the divider drag goes through to the screen. */
.agents-section-top .section-content {
    max-height: none;
    overflow: visible;
}
.agents-section-top.collapsed .section-content {
    max-height: 0;
    overflow: hidden;
}
/* The .section-title flex with `justify-content: space-between` works for
   the Agents row (chevron + text + count + 2 buttons fill the row), but
   pushes the chevron + "Workspace" text to opposite edges when there are
   only two children. Snap them together with flex-start + a small gap. */
.workspace-section .section-title {
    justify-content: flex-start;
    gap: 6px;
}
/* Inside the collapsible Workspace section, strip the default sidebar-nav
   padding AND drop the left-padding on each nav-item from 12 px down to
   9 px so they line up exactly under the .agent-item rows (which use 9 px)
   above. Visual: Documents / New Document / Views / Prompts / Refresh all
   left-justified flush with the Agents tiles. */
.workspace-section .sidebar-nav {
    padding: 0;
}
.workspace-section .nav-item,
.workspace-section .btn-refresh {
    padding-left: 9px;
    padding-right: 9px;
}
.workspace-section .nav-item .nav-icon,
.workspace-section .btn-refresh svg {
    margin-left: 0;
}
/* Make the agents list a scrollable viewport so the resize grabber below
   slides its visible region up/down. max-height is set inline via JS so
   we don't fight a static rule here — just provide the overflow + a sane
   default min-height. */
#agents-list {
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 40px;
}
#agents-list::-webkit-scrollbar         { width: 6px; }
#agents-list::-webkit-scrollbar-track   { background: transparent; }
#agents-list::-webkit-scrollbar-thumb   { background: rgba(255,255,255,0.10); border-radius: 3px; }
#agents-list::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.20); }

/* Drag-to-resize handle between the Agents section and the Workspace nav.
   Uses a unique class (.agents-divider) instead of .sidebar-resize-handle
   because the latter is already taken by the sidebar's right-edge horizontal
   resize handle (position:absolute; width:6px) — would collide. Full-width
   strip so the user can grab it anywhere, not just the central grip. */
.agents-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 22px;
    margin: 0;
    padding: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.06);
    cursor: ns-resize;
    position: relative;
    user-select: none;
    transition: background 0.12s ease, border-color 0.12s ease;
    flex-shrink: 0;
    /* Use touch-action: none so trackpad gestures don't pan the page during
       drag. Pointer Events API needs this for vertical drags to work. */
    touch-action: none;
    /* Stronger z-index so nothing above accidentally captures the click. */
    z-index: 10;
}
/* Children mustn't intercept the mousedown — keep the entire strip as the
   drag target so any pixel within the bar grabs. */
.agents-divider * { pointer-events: none; }
.agents-divider:hover,
body.aiw-resizing-agents .agents-divider {
    background: rgba(99, 102, 241, 0.25);
    border-color: rgba(99, 102, 241, 0.50);
}
.agents-divider-grip {
    width: 42px;
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.35);
    transition: background 0.12s ease;
    margin-right: 10px;
}
.agents-divider-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.45);
    transition: color 0.12s ease;
    pointer-events: none;
}
.agents-divider:hover .agents-divider-label,
body.aiw-resizing-agents .agents-divider-label {
    color: #c7d2fe;
}
.agents-divider:hover .agents-divider-grip,
body.aiw-resizing-agents .agents-divider-grip {
    background: #c7d2fe;
}
/* While dragging, lock the cursor + suppress text selection across the page. */
body.aiw-resizing-agents,
body.aiw-resizing-agents * {
    cursor: ns-resize !important;
    user-select: none !important;
}

.agents-count {
    color: rgba(255, 255, 255, 0.55);
    font-size: 11px;
    font-weight: 500;
    margin-left: 6px;
}
.agent-item {
    display: flex; flex-direction: column;
    gap: 3px;
    padding: 7px 9px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    /* Thick left edge — the freshness gradient color is applied inline here
       (most-recent green → oldest brown). Matches the floating Agents Bar. */
    border-left-width: 3px;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: background 0.12s ease, border-color 0.12s ease;
    position: relative;
}
/* Awaiting-prompt rows: amber double ring + flashing dot, same vocabulary
   as the bar. !important so it overrides the inline freshness gradient. */
.agent-item.awaiting-prompt {
    border-color: #fbbf24 !important;
    border-left-color: #fbbf24 !important;
    background: linear-gradient(180deg, rgba(251, 191, 36, 0.22), rgba(180, 83, 9, 0.10)) !important;
    box-shadow:
        inset 0 0 0 1px #fbbf24,
        0 0 0 1px #fbbf24,
        0 0 10px rgba(251, 191, 36, 0.55);
    animation: agent-item-pulse 1.2s ease-in-out infinite;
}
.agent-item.awaiting-prompt .agent-name {
    color: #fde68a;
}
.agent-item.awaiting-prompt .agent-name::before {
    content: "●";
    color: #fde047;
    margin-right: 5px;
    font-size: 9px;
    text-shadow: 0 0 6px rgba(253, 224, 71, 0.9);
    animation: agent-item-dot 0.7s ease-in-out infinite;
}
@keyframes agent-item-pulse {
    0%, 100% {
        box-shadow:
            inset 0 0 0 1px #fbbf24,
            0 0 0 1px #fbbf24,
            0 0 8px rgba(251, 191, 36, 0.50);
    }
    50% {
        box-shadow:
            inset 0 0 0 1px #fde047,
            0 0 0 2px #fde047,
            0 0 14px rgba(253, 224, 71, 0.80);
    }
}
@keyframes agent-item-dot {
    0%, 100% { opacity: 1;   text-shadow: 0 0 6px rgba(253,224,71,0.9); }
    50%      { opacity: 0.4; text-shadow: 0 0 2px rgba(253,224,71,0.3); }
}

.agent-item:hover {
    background: rgba(99, 102, 241, 0.18);
    border-color: rgba(99, 102, 241, 0.50);
    color: #fff;
    text-decoration: none;
}
.agent-row-1 {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 600;
}
.agent-row-2 {
    display: flex; align-items: center; gap: 8px;
    font-size: 10px; color: rgba(255, 255, 255, 0.55);
    font-family: ui-monospace, Menlo, monospace;
}
/* Latest captured prompt for this agent's cwd. Single-line, ellipsized,
   with a tiny terminal-prompt icon so it reads as user input at a glance. */
.agent-row-3 {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.65);
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
    font-style: italic;
}
.agent-prompt-icon {
    flex-shrink: 0;
    color: rgba(99, 102, 241, 0.75);
}
.agent-prompt-text {
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.agent-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-cwd  { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-kind {
    background: rgba(99, 102, 241, 0.30);
    color: #c7d2fe;
    font-size: 9px; font-weight: 600;
    padding: 1px 5px; border-radius: 3px;
    text-transform: uppercase;
    flex-shrink: 0;
}
.agent-status {
    width: 7px; height: 7px; border-radius: 50%;
    flex-shrink: 0;
}
.agent-status-idle    { background: #6b7280; }
.agent-status-running { background: #22c55e; box-shadow: 0 0 4px rgba(34, 197, 94, 0.7); }
.agent-kind-claude { background: rgba(99, 102, 241, 0.30); color: #c7d2fe; }
.agent-kind-codex  { background: rgba(16, 185, 129, 0.30); color: #6ee7b7; }

/* Vendor icon (Claude burst / Codex cloud) — sits between the status dot
   and the agent name so the row can be identified by glyph instantly. */
.agent-vendor-icon {
    width: 16px; height: 16px;
    flex-shrink: 0;
    object-fit: contain;
    border-radius: 3px;
}
.agent-vendor-icon-claude { /* warm orange burst, no extra chrome */ }
.agent-vendor-icon-codex  { /* cloud has soft purple/blue gradient already */ }

/* ---- Agent canvas tiles (terminal look) ---- */
.canvas-agent-tile {
    position: absolute;
    background: #050a05;
    border: 1px solid rgba(34, 197, 94, 0.35);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(34, 197, 94, 0.10);
    overflow: hidden;
    cursor: pointer;
    font-family: "SF Mono", Menlo, Consolas, ui-monospace, monospace;
    color: #22c55e;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
    z-index: 10;
    display: flex; flex-direction: column;
}
.canvas-agent-tile:hover {
    transform: translateY(-2px);
    border-color: #22c55e;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.65), 0 0 0 2px rgba(34, 197, 94, 0.40);
}
/* "Prompt waiting" — idle session that's done with its turn and waiting
   on the user. Bright amber halo so you can spot which terminal is
   waiting from across the canvas. Distinct from the running-pulse green. */
.canvas-agent-tile.awaiting-prompt {
    border-color: #fbbf24;
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.55),
        0 0 0 2px #fbbf24,
        0 0 18px 4px rgba(251, 191, 36, 0.75),
        0 0 48px 12px rgba(251, 191, 36, 0.45);
    animation: cat-awaiting-pulse 1.6s ease-in-out infinite;
}
.canvas-agent-tile.awaiting-prompt:hover {
    border-color: #fde047;
    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.65),
        0 0 0 3px #fde047,
        0 0 24px 6px rgba(253, 224, 71, 0.85),
        0 0 60px 16px rgba(253, 224, 71, 0.55);
}
@keyframes cat-awaiting-pulse {
    0%, 100% {
        box-shadow:
            0 8px 24px rgba(0,0,0,0.55),
            0 0 0 2px #fbbf24,
            0 0 18px 4px rgba(251, 191, 36, 0.65),
            0 0 48px 12px rgba(251, 191, 36, 0.35);
    }
    50% {
        box-shadow:
            0 8px 24px rgba(0,0,0,0.55),
            0 0 0 3px #fde047,
            0 0 28px 8px rgba(253, 224, 71, 0.95),
            0 0 72px 22px rgba(251, 191, 36, 0.65);
    }
}
.cat-titlebar {
    display: flex; align-items: center; gap: 6px;
    padding: 7px 10px;
    background: linear-gradient(180deg, #1a1a1a, #0d0d0d);
    border-bottom: 1px solid rgba(34, 197, 94, 0.20);
    flex-shrink: 0;
}

/* Per-tile titlebar color (hash of /rename name → 1 of 8 variants).
   Each variant overrides the gradient and the bottom-border to match. */
.canvas-agent-tile.cat-color-0 .cat-titlebar { background: linear-gradient(180deg, #4338ca, #312e81); border-bottom-color: #6366f1; }
.canvas-agent-tile.cat-color-1 .cat-titlebar { background: linear-gradient(180deg, #b91c1c, #7f1d1d); border-bottom-color: #ef4444; }
.canvas-agent-tile.cat-color-2 .cat-titlebar { background: linear-gradient(180deg, #047857, #065f46); border-bottom-color: #10b981; }
.canvas-agent-tile.cat-color-3 .cat-titlebar { background: linear-gradient(180deg, #c2410c, #7c2d12); border-bottom-color: #f97316; }
.canvas-agent-tile.cat-color-4 .cat-titlebar { background: linear-gradient(180deg, #a16207, #713f12); border-bottom-color: #eab308; }
.canvas-agent-tile.cat-color-5 .cat-titlebar { background: linear-gradient(180deg, #be185d, #831843); border-bottom-color: #ec4899; }
.canvas-agent-tile.cat-color-6 .cat-titlebar { background: linear-gradient(180deg, #0e7490, #155e75); border-bottom-color: #06b6d4; }
.canvas-agent-tile.cat-color-7 .cat-titlebar { background: linear-gradient(180deg, #6d28d9, #4c1d95); border-bottom-color: #8b5cf6; }
/* Match the tile's outer border tint to the titlebar color so the whole
   card reads as one accent. Hover keeps the green glow as the affordance. */
.canvas-agent-tile.cat-color-0 { border-color: rgba(99, 102, 241, 0.35); }
.canvas-agent-tile.cat-color-1 { border-color: rgba(239, 68, 68, 0.35); }
.canvas-agent-tile.cat-color-2 { border-color: rgba(16, 185, 129, 0.40); }
.canvas-agent-tile.cat-color-3 { border-color: rgba(249, 115, 22, 0.40); }
.canvas-agent-tile.cat-color-4 { border-color: rgba(234, 179, 8, 0.40); }
.canvas-agent-tile.cat-color-5 { border-color: rgba(236, 72, 153, 0.40); }
.canvas-agent-tile.cat-color-6 { border-color: rgba(6, 182, 212, 0.40); }
.canvas-agent-tile.cat-color-7 { border-color: rgba(139, 92, 246, 0.40); }
/* Title text stays white-ish across all variants for legibility. */
.canvas-agent-tile[class*="cat-color-"] .cat-title { color: #ffffff; }
.canvas-agent-tile[class*="cat-color-"] .cat-kind  { color: rgba(255, 255, 255, 0.65); }
.cat-traffic-dot {
    width: 10px; height: 10px; border-radius: 50%;
    flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25);
}
.cat-red { background: #ff5f57; }
.cat-yellow { background: #febc2e; }
.cat-green { background: #28c840; }
.cat-title {
    flex: 1; min-width: 0;
    font-size: 12px; font-weight: 600;
    color: #d1d5db;
    text-align: center;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    margin-left: 8px;
}
.cat-kind {
    font-size: 9px;
    color: rgba(34, 197, 94, 0.70);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}
.cat-body {
    flex: 1 1 auto;
    padding: 12px 14px;
    background: #050a05;
    font-size: 13px;
    line-height: 1.55;
    overflow: hidden;
    display: flex; flex-direction: column;
    gap: 4px;
}
.cat-line { display: flex; align-items: baseline; gap: 8px; }
.cat-prompt {
    color: #16a34a;
    font-weight: 700;
    flex-shrink: 0;
}
.cat-cwd, .cat-cmd {
    color: #4ade80;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    min-width: 0;
}
.cat-cmd { color: #86efac; }
.cat-status-line {
    align-items: center;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed rgba(34, 197, 94, 0.20);
}
.cat-status {
    width: 8px; height: 8px; border-radius: 50%;
    flex-shrink: 0;
}
.cat-status-idle    { background: #6b7280; box-shadow: 0 0 4px rgba(107,114,128,0.4); }
.cat-status-running { background: #22c55e; box-shadow: 0 0 8px rgba(34,197,94,0.8);
                      animation: cat-pulse 1.4s ease-in-out infinite; }
@keyframes cat-pulse {
    0%, 100% { opacity: 1;   box-shadow: 0 0 8px rgba(34, 197, 94, 0.8); }
    50%      { opacity: 0.55; box-shadow: 0 0 12px rgba(34, 197, 94, 1.0); }
}
.cat-status-text {
    color: #86efac; font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.05em;
}
.cat-pid {
    margin-left: auto;
    color: rgba(34, 197, 94, 0.55); font-size: 10px;
}
.cat-blink {
    color: #22c55e;
    animation: cat-cursor-blink 1s step-end infinite;
}
@keyframes cat-cursor-blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}
.cat-footer {
    padding: 5px 10px;
    background: rgba(34, 197, 94, 0.05);
    border-top: 1px solid rgba(34, 197, 94, 0.18);
    color: rgba(34, 197, 94, 0.55);
    font-size: 10px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}
.canvas-agent-tile:hover .cat-footer {
    background: rgba(34, 197, 94, 0.15);
    color: #86efac;
}

/* Floating /agents-bar HUD — reuses .canvas-agent-tile verbatim, just
   strips the absolute positioning so tiles flow in a horizontal strip. */
.agents-bar-body {
    background: #0b0f17;
    margin: 0;
    /* Extra bottom padding leaves room for the bottom-center nav so the
       last tile (or last stacked row in vertical mode) doesn't sit under
       the controls. */
    padding: 8px 8px 30px 8px;
    overflow: hidden;
    height: 100vh;
    box-sizing: border-box;
    font-family: "SF Mono", Menlo, Consolas, ui-monospace, monospace;
}
#agents-bar {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow: hidden;
    height: 100%;
    align-items: stretch;
}
#agents-bar .canvas-agent-tile {
    position: static;
    width: auto;
    height: auto;
    /* Every tile gets an equal slice of the available width and stretches
       vertically. min-width: 0 lets the flex children actually shrink below
       their content's intrinsic width (text inside is already ellipsized). */
    flex: 1 1 0;
    min-width: 0;
    /* Inside the narrow strip the cat-awaiting-pulse outer bloom (48 px)
       gets clipped by neighboring tiles, so alerting tiles read almost
       the same as the rest. Override the awaiting style with effects that
       are *contained inside the tile box* — coloring the titlebar and
       body instead of relying on outer-edge glow. */
}
#agents-bar .canvas-agent-tile.awaiting-prompt {
    border-color: #fbbf24 !important;
    box-shadow:
        inset 0 0 0 2px #fbbf24,
        inset 0 0 22px rgba(251, 191, 36, 0.45),
        0 0 0 2px #fbbf24,
        0 0 18px rgba(251, 191, 36, 0.85);
    animation: bar-awaiting-strong 1.1s ease-in-out infinite;
}
#agents-bar .canvas-agent-tile.awaiting-prompt .cat-titlebar,
#agents-bar .canvas-agent-tile.awaiting-prompt[class*="cat-color-"] .cat-titlebar {
    background: linear-gradient(180deg, #facc15, #b45309) !important;
    border-bottom-color: #fde047 !important;
}
#agents-bar .canvas-agent-tile.awaiting-prompt .cat-title { color: #1f1300; }
#agents-bar .canvas-agent-tile.awaiting-prompt .cat-kind { color: rgba(31, 19, 0, 0.75); }
#agents-bar .canvas-agent-tile.awaiting-prompt .cat-body {
    background: linear-gradient(180deg, #1c1503, #050a05 60%);
}
#agents-bar .canvas-agent-tile.awaiting-prompt .cat-cwd,
#agents-bar .canvas-agent-tile.awaiting-prompt .cat-cmd { color: #fde047; }
#agents-bar .canvas-agent-tile.awaiting-prompt .cat-status-text { color: #fde047; }
/* Flashing dot prepended to the title so even at the narrowest breakpoint
   (everything else hidden) the amber title + dot make alerting obvious. */
#agents-bar .canvas-agent-tile.awaiting-prompt .cat-title::before {
    content: "●";
    color: #fde047;
    margin-right: 4px;
    text-shadow: 0 0 6px rgba(253, 224, 71, 0.9);
    animation: bar-awaiting-dot 0.7s ease-in-out infinite;
}
@keyframes bar-awaiting-strong {
    0%, 100% {
        box-shadow:
            inset 0 0 0 2px #fbbf24,
            inset 0 0 18px rgba(251, 191, 36, 0.40),
            0 0 0 2px #fbbf24,
            0 0 14px rgba(251, 191, 36, 0.75);
    }
    50% {
        box-shadow:
            inset 0 0 0 3px #fde047,
            inset 0 0 28px rgba(253, 224, 71, 0.60),
            0 0 0 3px #fde047,
            0 0 22px rgba(253, 224, 71, 0.95);
    }
}
@keyframes bar-awaiting-dot {
    0%, 100% { opacity: 1;   text-shadow: 0 0 6px rgba(253,224,71,0.9); }
    50%      { opacity: 0.45; text-shadow: 0 0 2px rgba(253,224,71,0.4); }
}
#agents-bar .canvas-agent-tile .cat-body {
    padding: 8px 10px;
    font-size: 12px;
    gap: 3px;
    min-width: 0;
}
#agents-bar .canvas-agent-tile .cat-titlebar { padding: 6px 8px; gap: 4px; }
#agents-bar .canvas-agent-tile .cat-title { font-size: 11px; margin-left: 4px; }
#agents-bar .canvas-agent-tile .cat-kind { font-size: 8px; }
/* The macOS-style red/yellow/green traffic-light dots are decorative on
   the main canvas tiles, but in the bar they just eat horizontal room and
   add noise — drop them in every bar orientation. */
#agents-bar .canvas-agent-tile .cat-traffic-dot { display: none; }
#agents-bar .canvas-agent-tile .cat-line { min-width: 0; }
#agents-bar .canvas-agent-tile .cat-cwd,
#agents-bar .canvas-agent-tile .cat-cmd { min-width: 0; }
#agents-bar .canvas-agent-tile .cat-footer {
    padding: 4px 8px;
    font-size: 9px;
}
/* As the window shrinks, fewer tiles fit comfortably and per-tile widths
   collapse. Use container-query-ish viewport breakpoints to progressively
   trim non-essential chrome. The container itself doesn't change layout —
   only the bits inside each tile do — so the strip stays one row. */

/* Narrow: drop the "INTERACTIVE/CODEX-TUI" kind tag and the click-to-focus
   footer so the cwd + status line keep room. */
@media (max-width: 1100px) {
    #agents-bar .canvas-agent-tile .cat-kind { display: none; }
    #agents-bar .canvas-agent-tile .cat-footer { display: none; }
}
/* Tighter: drop the cwd line and trim padding. */
@media (max-width: 800px) {
    #agents-bar .canvas-agent-tile .cat-body { padding: 6px 8px; gap: 2px; }
    #agents-bar .canvas-agent-tile .cat-line:nth-child(1) { display: none; }
    #agents-bar .canvas-agent-tile .cat-titlebar { padding: 4px 6px; }
    #agents-bar .canvas-agent-tile .cat-title { font-size: 10px; margin-left: 2px; }
    #agents-bar .canvas-agent-tile .cat-traffic-dot { width: 7px; height: 7px; }
}
/* Smallest: title + status dot only; status text + pid drop out. */
@media (max-width: 560px) {
    #agents-bar .canvas-agent-tile .cat-body { padding: 4px 6px; }
    #agents-bar .canvas-agent-tile .cat-line:nth-child(2) { display: none; }
    #agents-bar .canvas-agent-tile .cat-status-text { display: none; }
    #agents-bar .canvas-agent-tile .cat-pid { display: none; }
    #agents-bar .canvas-agent-tile .cat-status-line {
        margin-top: 2px; padding-top: 2px; border-top: none;
    }
}
/* Vertical-stack mode: when the window is taller than wide (or just very
   narrow regardless of height), flip the flex direction so each tile spans
   the full window width and they stack down the page. Also re-show all the
   per-tile content that the horizontal narrow-breakpoint hid — tile width
   in vertical mode is generous, so there's room. Rules placed AFTER the
   horizontal narrow breakpoints so they cascade-win. */
/* Vertical-stack mode — just the colored header bar per agent, stacked
   like a sidebar. No body, no footer, no traffic-light dots: this mode is
   for "I just want to see who's alive and which one is alerting" at a
   glance. Click still focuses the terminal. The freshness gradient + amber
   awaiting-prompt override on the titlebar carry the whole visual signal. */
@media (max-aspect-ratio: 1/1), (max-width: 380px) {
    .agents-bar-body { padding: 6px; }
    #agents-bar {
        flex-direction: column;
        overflow-y: auto;
        overflow-x: hidden;
        align-items: stretch;
        gap: 3px;
    }
    #agents-bar .canvas-agent-tile {
        flex: 0 0 auto;
        width: 100%;
        min-width: 0;
        min-height: 0;
        height: auto;
        border-radius: 4px;
    }
    /* Hide everything except the titlebar. */
    #agents-bar .canvas-agent-tile .cat-body,
    #agents-bar .canvas-agent-tile .cat-footer,
    #agents-bar .canvas-agent-tile .cat-traffic-dot,
    #agents-bar .canvas-agent-tile .cat-kind {
        display: none !important;
    }
    /* Titlebar IS the tile. Keep room for the title text on the left, with
       a thin amber pulse line tinting the whole row when alerting. */
    #agents-bar .canvas-agent-tile .cat-titlebar {
        padding: 6px 10px;
        border-bottom: none;
        border-radius: 4px;
    }
    #agents-bar .canvas-agent-tile .cat-title {
        flex: 1; min-width: 0;
        font-size: 12px; font-weight: 600;
        color: #ffffff;
        text-align: left;
        margin-left: 0;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    /* Slim vertical scrollbar so the column stays clean. */
    #agents-bar::-webkit-scrollbar        { width: 6px; height: auto; }
    #agents-bar::-webkit-scrollbar-thumb  { background: rgba(34, 197, 94, 0.25); border-radius: 3px; }
    /* Manual-mode drop indicators flip to top/bottom edges when stacked. */
    #agents-bar .canvas-agent-tile.drop-before {
        box-shadow: 0 -3px 0 0 #22c55e, 0 0 0 2px rgba(34, 197, 94, 0.30);
    }
    #agents-bar .canvas-agent-tile.drop-after {
        box-shadow: 0 3px 0 0 #22c55e, 0 0 0 2px rgba(34, 197, 94, 0.30);
    }
    /* Awaiting-prompt rows: keep the amber background + dot but trim the
       heavy ring/glow since rows are short and stacked. */
    #agents-bar .canvas-agent-tile.awaiting-prompt {
        box-shadow:
            inset 0 0 0 1px #fbbf24,
            0 0 0 1px #fbbf24,
            0 0 10px rgba(251, 191, 36, 0.7);
    }
}

/* === /import page === */
.import-container {
    max-width: 760px;
    margin: 20px auto;
    padding: 0 16px;
}
.import-container h2 {
    margin: 0 0 8px 0;
    color: var(--text-primary);
    font-size: 22px;
}
.import-subtitle {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.6;
    margin: 0 0 20px 0;
}
.import-subtitle code {
    background: rgba(99, 102, 241, 0.10);
    border: 1px solid rgba(99, 102, 241, 0.25);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 12px;
}
.import-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 220px;
    padding: 32px;
    border: 2px dashed rgba(99, 102, 241, 0.45);
    border-radius: 12px;
    background: rgba(99, 102, 241, 0.05);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.import-dropzone:hover {
    background: rgba(99, 102, 241, 0.10);
    border-color: #818cf8;
}
.import-dropzone.dragover {
    background: rgba(99, 102, 241, 0.20);
    border-color: #6366f1;
    border-style: solid;
    transform: scale(1.01);
}
.import-dropzone.uploading {
    opacity: 0.65;
    pointer-events: none;
}
.import-dropzone-icon {
    color: #818cf8;
    margin-bottom: 6px;
}
.import-dropzone-primary {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}
.import-dropzone-secondary {
    font-size: 13px;
}
.import-dropzone-action {
    color: #818cf8;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.import-results {
    margin-top: 24px;
    padding: 18px 20px;
    background: var(--bg-card, #ffffff);
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-radius: 10px;
}
.import-results-title {
    margin: 0 0 12px 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}
.import-results-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
}
.import-result-item a {
    color: #4f46e5;
    text-decoration: none;
    font-weight: 500;
}
.import-result-item a:hover { text-decoration: underline; }
.import-result-meta {
    color: var(--text-muted);
    font-size: 12px;
}
.import-result-error {
    color: #b91c1c;
}
.import-results-actions {
    margin-top: 16px;
    display: flex;
    gap: 8px;
}

.agents-bar-empty {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(34, 197, 94, 0.55);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    pointer-events: none;
}

/* Tiny nav anchored bottom-center. Overlays the strip without pushing tiles
   around; tooltips come from each button's `title` attr (native browser). */
.agents-bar-nav {
    position: fixed;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 4px;
    z-index: 1000;
    background: rgba(11, 15, 23, 0.85);
    padding: 2px 4px;
    border-radius: 6px;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.agents-bar-nav-btn {
    width: 16px;
    height: 16px;
    border: 1px solid rgba(34, 197, 94, 0.30);
    background: rgba(5, 10, 5, 0.85);
    color: rgba(34, 197, 94, 0.75);
    font-size: 11px;
    line-height: 1;
    padding: 0;
    border-radius: 3px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.agents-bar-nav-btn:hover {
    color: #86efac;
    border-color: #22c55e;
    background: rgba(34, 197, 94, 0.18);
}
.agents-bar-nav-btn.spinning { animation: agents-bar-nav-spin 0.6s linear; }
@keyframes agents-bar-nav-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Instant CSS tooltip — beats the native ~1 s tooltip delay so hovering
   the tiny icons gives immediate feedback. data-tip is mirrored from title
   in JS for the toggle; the other buttons get a static value via HTML. */
.agents-bar-nav-btn[data-tip] { position: relative; }
.agents-bar-nav-btn[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    /* Nav lives at the bottom-center now, so tooltips need to come up
       and be centered on each button so they don't spill below or sideways. */
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: rgba(5, 10, 5, 0.95);
    color: #d1fae5;
    border: 1px solid rgba(34, 197, 94, 0.35);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.3;
    max-width: 260px;
    width: max-content;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s ease, transform 0.12s ease;
    box-shadow: 0 -6px 14px rgba(0, 0, 0, 0.6);
    z-index: 1100;
    white-space: normal; /* allow wrap so long tips don't bleed off-screen */
    text-align: center;
}
.agents-bar-nav-btn[data-tip]:hover::after,
.agents-bar-nav-btn[data-tip]:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Autosort toggle: green = on, dim/strike-through = off. */
.agents-bar-toggle.on {
    color: #4ade80;
    border-color: rgba(34, 197, 94, 0.55);
    background: rgba(34, 197, 94, 0.18);
}
.agents-bar-toggle.off {
    color: rgba(34, 197, 94, 0.40);
    border-color: rgba(34, 197, 94, 0.20);
    background: rgba(5, 10, 5, 0.85);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

/* Manual-sort visual feedback: cursor + tile drop indicators. */
body.manual-sort #agents-bar .canvas-agent-tile { cursor: grab; }
body.manual-sort #agents-bar .canvas-agent-tile:active,
#agents-bar .canvas-agent-tile.dragging { cursor: grabbing; }
#agents-bar .canvas-agent-tile.dragging {
    opacity: 0.4;
    transform: scale(0.97);
}
#agents-bar .canvas-agent-tile.drop-before {
    box-shadow: -3px 0 0 0 #22c55e, 0 0 0 2px rgba(34, 197, 94, 0.30);
}
#agents-bar .canvas-agent-tile.drop-after {
    box-shadow:  3px 0 0 0 #22c55e, 0 0 0 2px rgba(34, 197, 94, 0.30);
}
/* Slim webkit scrollbar so the strip stays clean on narrow heights. */
#agents-bar::-webkit-scrollbar { height: 6px; }
#agents-bar::-webkit-scrollbar-track { background: transparent; }
#agents-bar::-webkit-scrollbar-thumb {
    background: rgba(34, 197, 94, 0.25);
    border-radius: 3px;
}
#agents-bar::-webkit-scrollbar-thumb:hover { background: rgba(34, 197, 94, 0.5); }

.prompts-list::-webkit-scrollbar {
    width: 6px;
}

.prompts-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

.prompts-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
}

.prompts-list::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}

.prompt-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px;
    color: var(--text-sidebar);
    border-radius: 6px;
    transition: all var(--transition-fast);
    text-decoration: none;
    margin-bottom: 4px;
    position: relative;
    cursor: pointer;
}

.prompt-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-sidebar-active);
    text-decoration: none;
}

.prompt-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.prompt-folder {
    font-size: 10px;
    font-weight: 600;
    color: var(--color-primary-light);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.resume-badge {
    display: inline-block;
    margin-left: 4px;
    color: #6eb4ff;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    font-size: 11px;
}

.prompt-date {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.4);
}

.prompt-text {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.4;
    word-break: break-word;
}

.prompt-item:hover .prompt-text {
    color: white;
}

.prompt-delete {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 18px;
    height: 18px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
}

.prompt-item:hover .prompt-delete {
    display: flex;
}

.prompt-delete:hover {
    background: var(--color-error);
    color: white;
}

.prompts-empty {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
    padding: 8px 12px;
}

/* Collapsed sidebar - hide prompts section */
.sidebar.collapsed .prompts-section {
    display: none;
}

/* ==========================================================================
   Collapsible Sidebar Sections
   ========================================================================== */

.sidebar-section.collapsible .section-title {
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease;
    margin: 0 -12px;
    padding: 8px 12px;
    border-radius: 6px;
}

.sidebar-section.collapsible .section-title:hover {
    background: rgba(255, 255, 255, 0.05);
}

.section-chevron {
    display: inline-block;
    font-size: 16px;
    margin-right: 8px;
    transition: transform 0.2s ease;
    color: rgba(255, 255, 255, 0.6);
}

.sidebar-section.collapsible.collapsed .section-chevron {
    transform: rotate(-90deg);
}

.sidebar-section.collapsible .section-content {
    max-height: 500px;
    overflow: hidden;
    transition: max-height 0.25s ease, opacity 0.2s ease;
    opacity: 1;
}

.sidebar-section.collapsible.collapsed .section-content {
    max-height: 0;
    opacity: 0;
}

/* Collapsed sidebar - hide chevron */
.sidebar.collapsed .section-chevron {
    display: none;
}

/* ==========================================================================
   Shortcuts View
   ========================================================================== */

.shortcuts-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: 8px;
    margin-bottom: 16px;
    gap: 16px;
    flex-wrap: wrap;
}

.shortcuts-filters {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    flex: 1;
}

.shortcuts-filters .filter-input,
.shortcuts-filters .filter-select {
    padding: 8px 12px;
    border: 1px solid var(--border-card);
    border-radius: 6px;
    font-size: 13px;
    background: var(--bg-main);
    color: var(--text-primary);
}

.shortcuts-filters .filter-input {
    min-width: 200px;
}

.shortcuts-filters .filter-select {
    min-width: 140px;
}

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

.shortcuts-container {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: 8px;
    min-height: 400px;
}

.shortcuts-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: var(--text-muted);
    gap: 12px;
}

.shortcuts-loading .spinner {
    width: 32px;
    height: 32px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.shortcuts-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: var(--text-muted);
    text-align: center;
}

.shortcuts-empty .error {
    color: var(--color-error);
}

.shortcuts-empty .not-configured {
    text-align: left;
    max-width: 500px;
    padding: 24px;
    background: var(--bg-card);
    border-radius: 8px;
    border: 1px solid var(--border-light);
}

.shortcuts-empty .not-configured h3 {
    margin: 0 0 12px 0;
    color: var(--text-primary);
}

.shortcuts-empty .not-configured p {
    margin: 8px 0;
    color: var(--text-secondary);
}

.shortcuts-empty .not-configured ol {
    margin: 12px 0;
    padding-left: 24px;
    color: var(--text-secondary);
}

.shortcuts-empty .not-configured li {
    margin: 8px 0;
}

.shortcuts-empty .not-configured code {
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 0.9em;
}

.shortcuts-empty .not-configured a {
    color: var(--color-primary);
}

.shortcuts-empty .not-configured .integration-note {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border-light);
    font-style: italic;
    color: var(--text-muted);
}

.shortcuts-list {
    padding: 12px;
}

/* Story Card */
.story-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    margin-bottom: 8px;
    background: var(--bg-main);
    transition: all 0.15s ease;
    cursor: pointer;
}

.story-card:hover {
    border-color: var(--color-primary);
    background: rgba(99, 102, 241, 0.05);
}

.story-card.selected {
    border-color: var(--color-primary);
    background: rgba(99, 102, 241, 0.1);
}

.story-card.imported {
    opacity: 0.6;
}

.story-checkbox {
    padding-top: 2px;
}

.story-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

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

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

.story-type {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 4px;
    color: white;
}

.story-id {
    font-size: 11px;
    color: var(--text-muted);
    font-family: monospace;
}

.story-status {
    font-size: 11px;
    color: var(--text-secondary);
    background: var(--bg-hover);
    padding: 2px 8px;
    border-radius: 10px;
}

.story-imported-badge {
    font-size: 10px;
    color: var(--color-success);
    background: var(--color-success-bg);
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 500;
}

.story-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.4;
    margin-bottom: 6px;
}

.story-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.story-label {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 10px;
    border: 1.5px solid;
    color: #1f2937;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}
/* Adapt automatically when the page is in dark mode */
@media (prefers-color-scheme: dark) {
    .story-label { color: #f3f4f6; text-shadow: none; }
}

.story-actions {
    display: flex;
    align-items: center;
}

.story-link {
    padding: 6px;
    color: var(--text-muted);
    border-radius: 4px;
    transition: all 0.15s ease;
}

.story-link:hover {
    background: var(--bg-hover);
    color: var(--color-primary);
}

/* Story Groups */
.story-group {
    margin-bottom: 20px;
}

.story-group-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--bg-hover);
    border-radius: 6px;
    margin-bottom: 10px;
}

.story-group-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.story-group-count {
    font-size: 11px;
    color: var(--text-muted);
    background: var(--bg-card);
    padding: 2px 8px;
    border-radius: 10px;
}

.story-group-items {
    padding-left: 8px;
}

/* Import Modal */
.import-modal {
    width: 500px;
    max-width: 90vw;
}

.import-progress {
    text-align: center;
}

.progress-bar {
    height: 8px;
    background: var(--bg-hover);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 12px;
}

.progress-fill {
    height: 100%;
    background: var(--color-primary);
    border-radius: 4px;
    transition: width 0.3s ease;
}

#import-status {
    color: var(--text-secondary);
    font-size: 14px;
}

.import-success {
    margin-top: 16px;
    padding: 12px;
    background: var(--color-success-bg);
    border-radius: 6px;
}

.import-success h4 {
    color: var(--color-success);
    margin: 0 0 8px 0;
    font-size: 14px;
}

.import-success ul {
    margin: 0;
    padding-left: 20px;
    font-size: 13px;
    color: var(--text-primary);
}

.import-success code {
    background: rgba(0, 0, 0, 0.1);
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 12px;
}

.import-success a,
.import-success a code {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.import-success a:hover,
.import-success a:hover code {
    color: var(--color-primary-hover, var(--color-primary));
    background: rgba(99, 102, 241, 0.12);
}
.import-success-link { font-weight: 600; }
.import-success-list li { margin-bottom: 4px; }

.import-errors {
    margin-top: 16px;
    padding: 12px;
    background: var(--color-error-bg);
    border-radius: 6px;
}

.import-errors h4 {
    color: var(--color-error);
    margin: 0 0 8px 0;
    font-size: 14px;
}

.import-errors ul {
    margin: 0;
    padding-left: 20px;
    font-size: 13px;
    color: var(--text-primary);
}

/* Word document icon */
.word-icon {
    display: inline-block;
    vertical-align: middle;
    margin-right: 6px;
    flex-shrink: 0;
}

.word-icon-inline {
    display: inline-block;
    vertical-align: middle;
    margin-right: 4px;
}

.card-title .word-icon {
    margin-right: 8px;
}

.canvas-node-title .word-icon,
.group-card-title .word-icon {
    margin-right: 5px;
    vertical-align: text-bottom;
}

/* Type badge for docx */
.type-docx,
.type-document {
    background: #2B579A !important;
    color: white !important;
}


/* Excel document icon */
.excel-icon {
    display: inline-block;
    vertical-align: middle;
    margin-right: 6px;
    flex-shrink: 0;
}

.excel-icon-inline {
    display: inline-block;
    vertical-align: middle;
    margin-right: 4px;
}

.card-title .excel-icon {
    margin-right: 8px;
}

.canvas-node-title .excel-icon,
.group-card-title .excel-icon {
    margin-right: 5px;
    vertical-align: text-bottom;
}

/* Type badge for Excel/CSV */
.type-xlsx,
.type-xls,
.type-csv,
.type-spreadsheet {
    background: #217346 !important;
    color: white !important;
}

/* Preview table for Excel files */
.preview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
    margin-top: 1rem;
}

.preview-table th,
.preview-table td {
    border: 1px solid #334155;
    padding: 8px 12px;
    text-align: left;
}

.preview-table th {
    background: #1e293b;
    font-weight: 600;
}

.preview-table tr:nth-child(even) {
    background: rgba(30, 41, 59, 0.5);
}

.excel-notice {
    color: #94a3b8;
    margin-bottom: 1rem;
}



/* ==========================================================================
   MOBILE RESPONSIVENESS (≤ 760 px)
   ----------------------------------------------------------------------------
   On a phone the desktop sidebar takes the whole viewport. Below 760 px we:
     - hide the sidebar off-screen (slide-in on demand)
     - drop main-content margin to 0
     - inject a floating hamburger button (rendered by _base.html JS)
     - add a backdrop scrim
   The hamburger + backdrop are styled here but created in _base.html so
   non-mobile pages don't ship dead markup.
   ========================================================================== */

@media (max-width: 760px) {
    :root { --sidebar-width: 260px; }
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        z-index: 1000;
        box-shadow: 0 0 30px rgba(0, 0, 0, 0.4);
        border-radius: 0;
    }
    .sidebar.mobile-open { transform: translateX(0); }
    .sidebar-resize-handle { display: none; }
    .main-content {
        margin-left: 0 !important;
        padding: 60px 16px 24px 16px;
    }
    .main-content.sidebar-collapsed { margin-left: 0 !important; }
    /* Hamburger button — fixed top-left */
    .bn-mobile-hamburger {
        position: fixed;
        top: 12px; left: 12px;
        z-index: 1100;
        width: 40px; height: 40px;
        background: #0f172a;
        color: white;
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 8px;
        display: flex; align-items: center; justify-content: center;
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    }
    .bn-mobile-hamburger svg { width: 20px; height: 20px; }
    /* Backdrop scrim behind the open sidebar */
    .bn-mobile-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.55);
        z-index: 999;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
    }
    .bn-mobile-backdrop.show {
        opacity: 1;
        pointer-events: auto;
    }
    /* Page-header buttons + filters often used CSS-grid with tight columns
       that overflow on phones. Let them stack. */
    .sales-tile, .mod-grid, .filter-bar, .aig-content {
        max-width: 100% !important;
    }
    /* Big tables (orders, accounts) need horizontal scroll on phone */
    table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    /* Reduce the giant H1s a notch */
    h1 { font-size: 24px !important; line-height: 1.1; }
    .aig-content { padding: 14px 14px; }
    /* Floating chat bar (Ask the active AI) goes full-width with smaller pad */
    .aig-chatbar form, #aig-chatbar form { padding: 8px 14px !important; }
    .aig-chatbar input, #aig-chatbar-input {
        font-size: 16px !important;  /* iOS only zooms inputs <16px */
    }
    /* Sales Campaigns wizard: drop two-col layouts to single col */
    .sw-grid2 { grid-template-columns: 1fr !important; }
    .sw-target-row { flex-direction: column; }
    /* DTC Yearly card: tighter tiles on phone */
    .bn-dtc-tiles { grid-template-columns: 1fr 1fr !important; }
    /* Operator fleet cards: single column */
    .op-card { width: 100% !important; }
}

/* ↓ even tighter — small phones */
@media (max-width: 420px) {
    .bn-dtc-tiles { grid-template-columns: 1fr !important; }
    .sw-card { padding: 14px 16px !important; }
}