/* Custom Font setup to mimic San Francisco and Menlo */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    user-select: none;
    overflow-x: hidden; /* prevent horizontal scroll by default */
}

.code-font {
    font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
}

/* Xcode Dark Mode Scrollbar (default) */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #1e1e1e;
}

::-webkit-scrollbar-thumb {
    background: #424242;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #4f4f4f;
}

/* Hide scrollbars inside the iPhone preview content, but keep it scrollable */
.iphone-scroll::-webkit-scrollbar,
.no-scrollbar::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.iphone-scroll,
.no-scrollbar {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

/* Syntax Highlighting Colors - Vibrant Update */
.syntax-keyword {
    color: #ff4081;
    font-weight: bold;
}

/* Pink */
.syntax-type {
    color: #b388ff;
    font-weight: bold;
}

/* Purple */
.syntax-string {
    color: #e5e7eb;
    font-weight: 400;
}

/* Icon-like string values (e.g., "message.fill") */
.syntax-icon {
    color: #38bdf8;
}

/* High-emphasis project copy (Text(), title:, desc:) */
.syntax-project {
    color: #f97316; /* warm amber/orange to stand out */
    font-weight: 600;
}

/* Red/Orange */
.syntax-func {
    color: #40c4ff;
    font-weight: bold;
}

/* Blue */
.syntax-comment {
    color: #607d8b;
    font-style: italic;
}

/* Grey */
.syntax-number {
    color: #ffd740;
}

/* Yellow */
.syntax-property {
    color: #69f0ae;
}

/* Green */
.syntax-link {
    text-decoration: underline;
    cursor: pointer;
    color: inherit;
}

.syntax-link:hover {
    color: #40c4ff;
}

::selection {
    background: #264f78;
}

/* Tab Shapes */
.tab-active {
    background-color: #1f1f24;
    border-bottom: 2px solid #007aff;
    color: #fff;
}

.tab-inactive {
    background-color: #2d2d30;
    color: #9ca3af;
    border-right: 1px solid #1e1e1e;
}

/* Horizontal Resizer Handles */
.resizer {
    width: 5px;
    background-color: #1e1e1e;
    cursor: col-resize;
    transition: background-color 0.2s;
    z-index: 10;
    flex-shrink: 0;
    position: relative;
}

.resizer::after {
    content: '';
    position: absolute;
    left: 2px;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: #000;
    opacity: 0.2;
}

.resizer:hover,
.resizer.resizing {
    background-color: #007aff;
}

/* Vertical Resizer Handle (for Console) */
.resizer-y {
    height: 5px;
    background-color: #1e1e1e;
    cursor: row-resize;
    transition: background-color 0.2s;
    z-index: 10;
    flex-shrink: 0;
    width: 100%;
    position: relative;
    border-top: 1px solid #2d2d30;
}

.resizer-y:hover,
.resizer-y.resizing {
    background-color: #007aff;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out forwards;
}

/* -------------------------------------------------------------------------- */
/* MOBILE OPTIMIZATIONS FOR SIMPLE VIEW                                       */
/* Apply only on small screens (phones)                                      */
/* -------------------------------------------------------------------------- */

@media (max-width: 768px) {
    /* 1) Hide "View Source" button in Simple view nav */
    #simple-view button[onclick*="selectMode('developer')"],
    #simple-view button[onclick*="selectMode("developer")"] {
        display: none;
    }

    /* Center "Projects" title and stack filters underneath on phone */
    #simple-view section.space-y-10 > div:first-child {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

    #simple-view #projects {
        text-align: center;
    }

    #simple-view section.space-y-10 > div:first-child > div {
        width: 100%;
        justify-content: center;
        gap: 0.5rem;
    }

    /* Reduce vertical gap before "All Projects" on phone */
    #projects-section {
        margin-top: 1rem !important;
    }

    /* Ensure grid and cards don’t cause side-scroll */
    #simple-view,
    #simple-view nav,
    #simple-view section,
    #simple-project-grid {
        overflow-x: hidden;
    }

    /* Modal content: prevent horizontal scroll & wrap tags nicely */
    #modal-content-card {
        overflow-x: hidden;
    }

    #modal-tags {
        flex-wrap: wrap;
        row-gap: 0.25rem;
    }

    #modal-tags span {
        display: block;
        white-space: normal;
    }
}