/* Custom Scrollbar for a cleaner look */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #1e293b;
}
::-webkit-scrollbar-thumb {
    background: #475569;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

/* Line Numbers Styling */
#line-numbers {
    min-width: 3ch;
    padding: 1rem 0.5rem 1rem 1rem;
    border-right: 1px solid #334155;
    user-select: none;
    pointer-events: none;
}

/* Each line number as a block element */
.line-num {
    /* Height matches textarea line-height automatically */
}

/* Ensure line numbers don't show scrollbar */
#line-numbers::-webkit-scrollbar {
    display: none;
}

#line-numbers {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Syntax Highlighting Colors */
.json-key { color: #9cdcfe; }      /* Light Blue */
.json-string { color: #ce9178; }   /* Orange/Red */
.json-number { color: #b5cea8; }   /* Light Green */
.json-boolean { color: #569cd6; }  /* Blue */
.json-null { color: #569cd6; }     /* Blue */
.json-bracket { color: #d4d4d4; }  /* Light Grey */

/* Tree View specific styles */
.collapsible-arrow {
    display: inline-block;
    cursor: pointer;
    width: 16px;
    text-align: center;
    transition: transform 0.2s ease;
    user-select: none;
    color: #d4d4d4;
    vertical-align: middle;
}
.collapsed .collapsible-arrow {
    transform: rotate(-90deg);
}
.child-container {
    margin-left: 20px;
    border-left: 1px solid #334155;
    padding-left: 4px;
}
.collapsed .child-container {
    display: none;
}
.collapsed-indicator {
    display: none;
    color: #64748b;
    font-style: italic;
    font-size: 0.9em;
    cursor: pointer;
}
.collapsed .collapsed-indicator {
    display: inline;
}

/* Animation for error message */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
    20%, 40%, 60%, 80% { transform: translateX(4px); }
}
.shake-animation {
    animation: shake 0.4s ease-in-out;
}

/* Mobile-first improvements for narrow screens */
@media (max-width: 640px) {
    /* Larger touch targets for buttons */
    header button {
        padding: 0.625rem 1rem; /* 10px 16px */
        min-height: 44px; /* Minimum touch target */
    }

    /* Better text readability - prevent iOS zoom on focus */
    body {
        font-size: 16px;
    }

    #json-input, #json-output {
        font-size: 16px;
        line-height: 1.5;
    }

    /* Hide line numbers on very narrow screens to save space */
    @media (max-width: 400px) {
        #line-numbers {
            display: none;
        }
        #json-input {
            padding-left: 1rem;
        }
    }

    /* Improve collapsible arrow touch targets */
    .collapsible-arrow {
        padding: 12px;
        margin: -12px;
        width: 32px;
        min-height: 44px;
    }

    /* Tree control icons */
    .bg-slate-800\/50 button svg {
        width: 20px;
        height: 20px;
    }
}

/* Momentum scrolling for better mobile experience */
#json-output, #json-input {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* Prevent text selection and tap highlights on UI elements */
button, .collapsible-arrow {
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}