/* ─── THE CLAW HUB — Light Cream Aesthetic ─── */

/* ─── SHARE MODE ─── */
.share-mode header, .share-mode footer, .share-mode .viewer-toolbar { display:none !important; }
.share-mode #file-viewer { border:none; padding:0; }
.share-mode #file-content { border:none; padding:1rem; max-width:800px; margin:0 auto; background:transparent; }
.share-mode { background:var(--bg); }

/* ─── RESET ─── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
:root {
    --bg: #f5f2ed;
    --surface: #fff;
    --border: #e0dcd6;
    --border-light: #ece8e2;
    --accent: #c0392b;
    --accent-dim: #e74c3c;
    --accent-soft: rgba(192,57,43,0.06);
    --text: #1e1e1e;
    --text-dim: #6b6b6b;
    --text-muted: #a09888;
    --green: #27ae60;
    --radius: 8px;
    --radius-sm: 5px;
    --font-mono: 'SF Mono','Fira Code','JetBrains Mono','Cascadia Code','Courier New',monospace;
    --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --sidebar-w: 200px;
}
html, body { height:100%; background:var(--bg); color:var(--text); font-family:var(--font-body); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
::selection { background:var(--accent-soft); color:var(--accent); }
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }

/* ─── BOOT ─── */
#boot {
    position:fixed; inset:0;
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    background:#1a1a1a; z-index:999;
    transition:opacity .3s; padding:2rem;
}
#boot.fade-out { opacity:0; pointer-events:none; }
#boot-text { font-family:var(--font-mono); color:#00ff41; font-size:.85rem; margin-bottom:1.5rem; white-space:pre; }
#boot-text .dim { color:#8888aa; }
#boot-text .green { color:#00ff88; }
#boot-text .accent { color:#00d4ff; }
#boot-text .blink { animation:blink 1s step-end infinite; }
#boot-status { font-family:var(--font-mono); font-size:.65rem; color:#00cc33; margin-bottom:.75rem; }
#boot-bar { width:160px; height:2px; background:#333; border-radius:2px; overflow:hidden; }
#boot-fill { width:0%; height:100%; background:#00ff41; transition:width .3s; }

@keyframes blink { 50% { opacity:0; } }

/* ─── LAYOUT ─── */
#app { display:flex; height:100vh; overflow:hidden; }
.hidden { display:none!important; }

/* ─── SIDEBAR ─── */
#sidebar {
    width:var(--sidebar-w);
    min-width:var(--sidebar-w);
    background:var(--surface);
    border-right:1px solid var(--border);
    display:flex;
    flex-direction:column;
    overflow:hidden;
    transition:transform .25s ease;
    z-index:20;
}

.sidebar-header {
    display:flex;
    align-items:center;
    gap:.5rem;
    padding:1rem 1rem .5rem;
    border-bottom:1px solid var(--border);
}
.logo { font-size:1.3rem; }
.logo-text {
    font-family:var(--font-mono);
    font-size:.7rem;
    font-weight:700;
    letter-spacing:.1em;
    color:var(--accent);
}

#nav-tabs {
    flex:1;
    display:flex;
    flex-direction:column;
    gap:.15rem;
    padding:.75rem .5rem;
    overflow-y:auto;
}
.tab {
    background:none;
    border:1px solid transparent;
    color:var(--text-dim);
    font-family:var(--font-mono);
    font-size:.68rem;
    font-weight:500;
    padding:.5rem .7rem;
    border-radius:var(--radius);
    cursor:pointer;
    text-align:left;
    transition:all .15s;
}
.tab:hover { border-color:var(--border-light); color:var(--text); background:var(--accent-soft); }
.tab.active {
    background:var(--accent);
    border-color:var(--accent);
    color:#fff;
}

.sidebar-footer {
    padding:.6rem 1rem;
    border-top:1px solid var(--border);
    display:flex;
    align-items:center;
    gap:.35rem;
    font-family:var(--font-mono);
    font-size:.55rem;
    color:var(--text-muted);
}
.status-dot { color:var(--green); font-size:.55rem; }
.status-text { color:var(--text-dim); }

/* ─── MAIN AREA ─── */
#main-area {
    flex:1;
    display:flex;
    flex-direction:column;
    min-width:0;
    overflow:hidden;
}

/* ─── HEADER ─── */
header {
    flex-shrink:0;
    background:var(--surface);
    border-bottom:1px solid var(--border);
    padding:.4rem .8rem;
}
.header-top {
    display:flex;
    align-items:center;
    gap:.5rem;
}
#menu-toggle {
    display:none;
    background:none;
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    color:var(--text-dim);
    font-size:.85rem;
    padding:.2rem .45rem;
    cursor:pointer;
    line-height:1;
}
#menu-toggle:hover { border-color:var(--accent-dim); color:var(--accent); }
.tag {
    font-family:var(--font-mono);
    font-size:.6rem;
    color:var(--text-muted);
    flex:1;
}
.header-actions { display:flex; gap:.3rem; }
.icon-btn {
    background:none;
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    color:var(--text-dim);
    font-size:.85rem;
    padding:.2rem .4rem;
    cursor:pointer;
    line-height:1;
    transition:all .15s;
}
.icon-btn:hover { border-color:var(--accent-dim); color:var(--accent); }
.icon-btn:active { transform:scale(.9); }

/* ─── MAIN ─── */
main {
    flex:1;
    overflow-y:auto;
    padding:1rem 1.25rem;
}

/* ─── FILE LIST ─── */
#file-list {
    max-width:820px;
    margin:0 auto;
    width:100%;
}

/* ─── PROJECT SECTION ─── */
.project-section {
    margin-bottom:.75rem;
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:var(--surface);
    overflow:hidden;
}
.project-section:hover { border-color:var(--border-light); }

.project-header {
    display:flex;
    align-items:center;
    gap:.5rem;
    padding:.55rem .7rem;
    cursor:pointer;
    user-select:none;
    background:var(--bg);
    border-bottom:1px solid var(--border);
    transition:background .12s;
}
.project-header:hover { background:var(--accent-soft); }

.project-icon { font-size:1rem; line-height:1; }
.project-name {
    font-family:var(--font-mono);
    font-size:.72rem;
    font-weight:600;
    color:var(--text);
    flex:1;
}
.project-count {
    font-family:var(--font-mono);
    font-size:.5rem;
    color:var(--text-muted);
    background:var(--border-light);
    padding:.1rem .35rem;
    border-radius:6px;
}
.project-toggle {
    font-size:.5rem;
    color:var(--text-muted);
    transition:transform .2s;
    display:inline-block;
}
.project-toggle.open { transform:rotate(90deg); }

.project-body { padding:.35rem .5rem; }
.project-body.collapsed { display:none; }

/* ─── FILE CARD ─── */
.file-item {
    display:flex;
    align-items:center;
    gap:.55rem;
    padding:.55rem .65rem;
    border:1px solid var(--border-light);
    border-radius:var(--radius-sm);
    margin-bottom:.3rem;
    cursor:pointer;
    transition:all .12s;
    background:var(--surface);
}
.file-item:last-child { margin-bottom:0; }
.file-item:active { transform:scale(.98); }
.file-item:hover { border-color:var(--accent-dim); }

.file-icon { font-size:1rem; flex-shrink:0; line-height:1; }
.file-meta { flex:1; min-width:0; }
.file-name {
    font-family:var(--font-mono);
    font-size:.75rem;
    color:var(--text);
    font-weight:600;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.file-desc {
    font-size:.62rem;
    color:var(--text-dim);
    margin-top:1px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.file-tag {
    font-family:var(--font-mono);
    font-size:.52rem;
    color:#fff;
    padding:.12rem .35rem;
    border-radius:3px;
    flex-shrink:0;
    line-height:1.4;
}
.file-tag.md { background:var(--green); }
.file-tag.html { background:var(--accent-dim); }

/* ─── NO FILES MESSAGE ─── */
.empty-state {
    text-align:center;
    padding:2rem;
    color:var(--text-muted);
    font-family:var(--font-mono);
    font-size:.7rem;
}

/* ─── VIEWER ─── */
#file-viewer {
    max-width:820px;
    margin:0 auto;
    width:100%;
}

.viewer-toolbar {
    display:flex;
    gap:.5rem;
    margin-bottom:.5rem;
}
.btn-ghost {
    background:var(--surface);
    border:1px solid var(--border);
    color:var(--text);
    font-family:var(--font-mono);
    font-size:.7rem;
    font-weight:500;
    padding:.35rem .7rem;
    border-radius:var(--radius-sm);
    cursor:pointer;
    transition:all .12s;
}
.btn-ghost:hover { border-color:var(--accent-dim); color:var(--accent); }
.btn-ghost:active { transform:scale(.97); }
#share-btn { margin-left:auto; }

#file-content {
    background:var(--surface);
    border:1px solid var(--border-light);
    border-radius:var(--radius);
    padding:.85rem;
    font-size:.8rem;
    line-height:1.6;
}

/* ─── MARKDOWN LIGHT THEME ─── */
#file-content h1 { font-size:1.1rem; color:var(--accent); margin:1rem 0 .5rem; padding-bottom:.25rem; border-bottom:2px solid var(--accent-soft); font-weight:700; }
#file-content h2 { font-size:.95rem; color:var(--text); margin:.9rem 0 .35rem; font-weight:600; }
#file-content h3 { font-size:.85rem; color:var(--text); margin:.7rem 0 .3rem; font-weight:600; }
#file-content h4, #file-content h5, #file-content h6 { font-size:.8rem; color:var(--text); margin:.6rem 0 .25rem; font-weight:600; }
#file-content p { margin-bottom:.5rem; }
#file-content ul, #file-content ol { margin-bottom:.5rem; padding-left:1.2rem; }
#file-content li { margin-bottom:.15rem; line-height:1.5; }
#file-content code:not(pre code) { background:var(--accent-soft); color:var(--accent); padding:.06em .25em; border-radius:3px; font-size:.72rem; font-family:var(--font-mono); }
#file-content pre { background:#f0ece6; border:1px solid var(--border); border-radius:var(--radius-sm); padding:.6rem; overflow-x:auto; margin-bottom:.6rem; font-size:.72rem; line-height:1.4; }
#file-content pre code { background:none; padding:0; color:var(--text); font-family:var(--font-mono); font-size:.78rem; line-height:1.5; }
#file-content blockquote { border-left:3px solid var(--accent-dim); padding:.3rem .7rem; margin:.5rem 0; color:var(--text-dim); background:var(--accent-soft); border-radius:0 var(--radius-sm) var(--radius-sm) 0; font-style:italic; }
#file-content hr { border:none; border-top:1px solid var(--border-light); margin:1rem 0; }
#file-content a { color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
#file-content a:hover { color:var(--green); }
#file-content strong { font-weight:700; color:var(--text); }
#file-content img { max-width:100%; border-radius:var(--radius-sm); border:1px solid var(--border); }
#file-content table { border-collapse:collapse; width:100%; margin-bottom:.6rem; font-size:.72rem; overflow-x:auto; display:block; }
#file-content th, #file-content td { border:1px solid var(--border); padding:.35rem .45rem; text-align:left; vertical-align:top; word-break:break-word; }
#file-content th { background:var(--accent-soft); color:var(--accent); font-weight:600; font-size:.7rem; }
#file-content table tr:nth-child(even) td { background:#faf8f5; }
#file-content table tr:hover td { background:var(--accent-soft); }

/* ─── HTML CONTENT (research HTML files) ─── */
.html-content { padding:0; }
.html-content h1 { font-size:1.1rem; color:var(--accent); margin:1rem 0 .5rem; padding-bottom:.25rem; border-bottom:2px solid var(--accent-soft); font-weight:700; }
.html-content h2 { font-size:.95rem; color:var(--text); margin:.9rem 0 .35rem; font-weight:600; }
.html-content h3 { font-size:.85rem; color:var(--text); margin:.7rem 0 .3rem; font-weight:600; }
.html-content p { margin-bottom:.5rem; line-height:1.55; }
.html-content ul, .html-content ol { margin-bottom:.5rem; padding-left:1.2rem; }
.html-content li { margin-bottom:.15rem; line-height:1.5; }
.html-content blockquote { border-left:3px solid var(--accent-dim); padding:.3rem .7rem; margin:.4rem 0; color:var(--text-dim); background:var(--accent-soft); border-radius:0 var(--radius-sm) var(--radius-sm) 0; font-style:italic; }

/* ─── FOOTER ─── */
footer {
    flex-shrink:0;
    padding:.4rem 1rem;
    border-top:1px solid var(--border-light);
    display:flex;
    justify-content:space-between;
    font-family:var(--font-mono);
    font-size:.55rem;
    color:var(--text-muted);
    background:var(--surface);
}
.footer-status { color:var(--green); }

/* ─── TOAST ─── */
#toast {
    position:fixed; bottom:3.5rem; left:50%; transform:translateX(-50%);
    background:var(--text); padding:.4rem .9rem; border-radius:16px;
    font-family:var(--font-mono); font-size:.6rem; color:#fff;
    opacity:0; transition:all .25s; pointer-events:none; z-index:100; white-space:nowrap;
}
#toast.show { opacity:1; bottom:4.2rem; }

/* ─── ANIMATIONS ─── */
@keyframes fadeUp {
    from { opacity:0; transform:translateY(8px); }
    to { opacity:1; transform:translateY(0); }
}
.file-item { animation:fadeUp .2s ease-out both; }
.file-item:nth-child(1) { animation-delay:.01s; }
.file-item:nth-child(2) { animation-delay:.02s; }
.file-item:nth-child(3) { animation-delay:.03s; }
.file-item:nth-child(4) { animation-delay:.04s; }
.file-item:nth-child(5) { animation-delay:.05s; }
.file-item:nth-child(6) { animation-delay:.06s; }
.file-item:nth-child(7) { animation-delay:.07s; }
.file-item:nth-child(8) { animation-delay:.08s; }

/* ─── RESPONSIVE ─── */
@media (max-width:768px) {
    #sidebar {
        position:fixed;
        left:0;
        top:0;
        bottom:0;
        transform:translateX(-100%);
        z-index:100;
    }
    #sidebar.open { transform:translateX(0); }
    #menu-toggle { display:block; }
    #sidebar-overlay {
        display:none;
        position:fixed;
        inset:0;
        background:rgba(0,0,0,0.3);
        z-index:99;
    }
    #sidebar-overlay.show { display:block; }
    main { padding:.75rem .5rem; }
}
@media (min-width:769px) {
    #menu-toggle { display:none; }
    #sidebar-overlay { display:none!important; }
}