/* 
 * SharePaste - Main Stylesheet 
 */
:root {
    --editor-font: 'Menlo', 'Monaco', 'Consolas', 'Courier New', monospace;
    --editor-size: 14px;
    --editor-line-height: 24px;
    --editor-padding: 20px;
    --line-num-width: 40px; 
}

@media (min-width: 768px) {
    :root { --editor-padding: 32px; }
}

/* --- GOOGLE GEMINI MINIMAL SCROLLBARS --- */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

/* Hide scrollbar on specific overlapping layers to prevent ugly double-scrollbars */
#highlighting, #line-numbers {
    scrollbar-width: none;
}
#highlighting::-webkit-scrollbar, #line-numbers::-webkit-scrollbar {
    display: none;
}

body { 
    font-family: 'Inter', sans-serif; 
    background-color: #050505;
    color: #a1a1aa;
}

/* --- EDITOR CONTAINER --- */
.editor-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #2d2d2d;
    transition: background 0.3s ease;
    display: flex; 
}

/* FULLSCREEN OVERRIDES */
.editor-container.is-fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 99999 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    border: none !important;
}

/* --- HIDE LINES LOGIC --- */
.editor-container.hide-lines #line-numbers { display: none !important; }
.editor-container.hide-lines #editor, 
.editor-container.hide-lines #highlighting { padding-left: var(--editor-padding) !important; }

/* --- TOOLBAR BUTTONS --- */
.toolbar-btn {
    color: #a1a1aa;
    border-radius: 6px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}
.toolbar-btn:hover { background-color: rgba(255, 255, 255, 0.1); color: #ffffff; }
.toolbar-btn.active { background-color: rgba(255, 255, 255, 0.2); color: #ffffff; }

/* --- PRISM OVERRIDES --- */
pre[class*="language-"], code[class*="language-"] {
    background: transparent !important;
    text-shadow: none !important;
}

/* --- LEFT COLUMN: LINE NUMBERS --- */
#line-numbers {
    position: relative; 
    flex-shrink: 0;    
    width: calc(var(--editor-padding) + var(--line-num-width));
    padding-top: var(--editor-padding); 
    padding-bottom: 60vh; 
    padding-right: 12px;
    text-align: right;
    background: rgba(0,0,0,0.1); 
    color: #52525b; 
    overflow: hidden; 
    white-space: pre; 
    user-select: none;
    pointer-events: none;
    z-index: 10;
}

/* --- RIGHT COLUMN: CODE WRAPPER --- */
#code-wrapper {
    position: relative;
    flex-grow: 1; 
    height: 100%;
    overflow: hidden; 
}

/* --- CORE EDITOR TYPOGRAPHY --- */
#editor, #highlighting, #highlighting code, #line-numbers {
    font-family: var(--editor-font) !important;
    font-size: var(--editor-size) !important;
    line-height: var(--editor-line-height) !important;
    tab-size: 4 !important;
    font-variant-ligatures: none;
    -webkit-font-smoothing: antialiased;
    letter-spacing: 0px;
}

#editor, #highlighting {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    margin: 0 !important; border: 0 !important; box-sizing: border-box;
    padding-top: var(--editor-padding) !important; 
    padding-left: 0 !important; 
    padding-right: var(--editor-padding) !important;
    padding-bottom: 60vh !important;
    overflow: auto; 
    white-space: pre; 
}

#highlighting { z-index: 0; pointer-events: none; }
#highlighting code { padding: 0 !important; margin: 0 !important; display: block; }

#editor {
    z-index: 1;
    color: transparent;
    background: transparent;
    caret-color: #22c55e;
    resize: none;
}
#editor:focus { outline: none; }
#editor::selection { background: rgba(34, 197, 94, 0.25); color: transparent; }

/* MODALS & SNOW */
.modal-bg { transition: opacity 0.2s ease-in-out; }
.modal-bg.hidden { opacity: 0; pointer-events: none; }
.modal-bg:not(.hidden) { opacity: 1; pointer-events: auto; }

.snowflake {
    position: fixed;
    top: -20px;
    color: white;
    user-select: none;
    pointer-events: none; 
    z-index: 50; 
    animation-name: fall;
    animation-timing-function: linear;
}

@keyframes fall {
    to { transform: translateY(105vh); }
}