/* Custom scrollbar for a cleaner look */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #4b5563;
    border-radius: 4px;
}
.dark ::-webkit-scrollbar-thumb {
    background: #374151;
}

/* Ensure the editor feels like a sheet of paper or a terminal */
#editor {
    resize: none;
    line-height: 1.2;
    white-space: pre;
    overflow-x: scroll !important;
    overflow-y: auto;
    tab-size: 4;
    background-repeat: no-repeat !important;
    background-origin: padding-box;
    background-attachment: local;
    outline: none !important;
}

#editorVisualContainer {
    overflow: hidden !important;
}

#editorVisualContainer > div.relative {
    overflow: hidden !important;
}

#guideRule {
    height: 100%;
    pointer-events: none;
}

#editor:focus {
    box-shadow: none !important;
    outline: none !important;
}

#editor::selection {
    background: rgba(59, 130, 246, 0.2); /* Light blue tint that doesn't block the trace image */
    color: inherit;
}

/* Character limit feedback animation */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-1px); }
    75% { transform: translateX(1px); }
}

.limit-reached {
    animation: shake 0.2s ease-in-out 0s 2;
    border-color: #ef4444 !important; /* tailwind red-500 */
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.4) !important;
}

.floating-bar {
    backdrop-filter: blur(8px);
}

.editor-locked {
    cursor: default !important;
    background-color: rgba(240, 240, 240, 0.3) !important;
}

.dark .editor-locked {
    background-color: rgba(30, 30, 30, 0.3) !important;
}

#bgModal[style*="display: none"] {
    display: none !important;
}

#bgModal:not(.hidden) {
    display: flex;
}

#editorBgLayer {
    transition: none !important; /* Prevent drifting during resize */
    background-origin: content-box; /* Match textarea text area */
    pointer-events: none;
}

#gridLayer {
    background-image: 
        linear-gradient(to right, rgba(128, 128, 128, 0.15) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(128, 128, 128, 0.15) 1px, transparent 1px);
    transition: none !important;
    pointer-events: none;
}

.dark #gridLayer {
    background-image: 
        linear-gradient(to right, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
}