<!DOCTYPE html>
<html>
    <head>
        {%metas%}
        <title>{%title%}</title>
        {%favicon%}
        {%css%}
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
        <link rel="stylesheet" href="/assets/styles.css">
        <style>
            * { margin: 0; padding: 0; box-sizing: border-box; }
            body {
                font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
                background: #f8f9fa;
                color: #202124;
                line-height: 1.5;
            }
            code, pre, .mono { font-family: 'IBM Plex Mono', monospace; }
            ::-webkit-scrollbar { width: 8px; height: 8px; }
            ::-webkit-scrollbar-track { background: #f1f3f4; }
            ::-webkit-scrollbar-thumb { background: #dadce0; }
            ::-webkit-scrollbar-thumb:hover { background: #80868b; }
            .file-item:hover { background: #e8eaed !important; }
            .file-item:hover .download-btn { opacity: 1 !important; }
            .folder-header:hover { background: #e8eaed !important; }
            @keyframes slideIn {
                from { opacity: 0; transform: translateY(8px); }
                to { opacity: 1; transform: translateY(0); }
            }
            .message-enter { animation: slideIn 0.2s ease forwards; }
            @keyframes pulse {
                0%, 100% { opacity: 1; }
                50% { opacity: 0.5; }
            }
            .thinking-pulse { animation: pulse 1.5s ease-in-out infinite; }
            @keyframes dots {
                0%, 20% { content: '.'; }
                40% { content: '..'; }
                60%, 100% { content: '...'; }
            }
            .loading-dots::after { content: ''; animation: dots 1.5s steps(1, end) infinite; }
            .send-btn:hover:not(:disabled) { background: #1557b0 !important; }
            .chat-input:focus { outline: none; border-color: #1a73e8 !important; box-shadow: 0 0 0 2px #e8f0fe !important; }
            .todo-item { display: flex; align-items: flex-start; gap: 8px; padding: 4px 0; }
            details summary { list-style: none; }
            details summary::-webkit-details-marker { display: none; }
            details summary::before {
                content: '▶';
                position: absolute;
                left: 4px;
                transition: transform 0.2s;
                font-size: 9px;
            }
            details[open] summary::before {
                transform: rotate(90deg);
            }
            details summary:hover {
                background: #e8eaed !important;
            }
            .resize-handle {
                width: 4px;
                cursor: col-resize;
                background: transparent;
                transition: background 0.2s;
                position: relative;
            }
            .resize-handle:hover {
                background: #1a73e8;
            }
            .resize-handle:active {
                background: #1557b0;
            }
            .mermaid-diagram {
                max-height: 80vh;
                overflow: auto;
            }
            .mermaid-diagram svg {
                max-width: 100%;
                height: auto;
                max-height: 80vh;
            }
        </style>
    </head>
    <body>
        {%app_entry%}
        <footer>
            {%config%}
            {%scripts%}
            {%renderer%}
        </footer>
        <script src="/assets/app.js"></script>
    </body>
</html>
