/* LSL Script Editor Styles */

/* Editor container */
.lsl-editor-container {
    display: flex;
    flex: 1;
    overflow: hidden;
    position: relative;
    border: 1px solid var(--border-color, #3a3a5a);
    border-radius: 2px;
    background: #1a1a2e;
}

/* Line numbers gutter.
   Source: panel_script_ed.xml:357 word_wrap="true" — Firestorm's script editor wraps
   long lines, and LLTextEditor draws a logical line's number once, against its FIRST
   visual row. A fixed row height per number cannot do that (one logical line can be
   three visual rows), so each number is positioned absolutely at the measured top of
   its row in the highlight layer and given that row's full height. See
   floater_script_editor.js _rebuildGutter(). */
.lsl-line-numbers {
    width: 45px;
    min-width: 45px;
    background: #141425;
    color: #555570;
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 12px;
    line-height: 1.4;
    padding: 0;
    text-align: right;
    overflow: hidden;
    user-select: none;
    border-right: 1px solid #2a2a4a;
    box-sizing: border-box;
}

.lsl-lines-inner {
    position: relative;
    width: 100%;
}

.lsl-lines-inner div {
    position: absolute;
    right: 0;
    padding-right: 6px;
    box-sizing: border-box;
}

.lsl-lines-inner div.lsl-error-line {
    background: rgba(224, 108, 117, 0.2);
    color: #e06c75;
    font-weight: bold;
}

/* Editor wrapper (overlay technique). The TEXTAREA is the only scroller — it is the
   element the caret lives in, so native wheel and caret scrolling both work there and
   the overlay/gutter are slaved to its scrollTop. */
.lsl-editor-wrapper {
    flex: 1;
    position: relative;
    overflow: hidden;
    min-width: 0;
}

/* Shared text properties for textarea and highlight overlay */
.lsl-textarea,
.lsl-highlight-layer {
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 12px;
    line-height: 1.4;
    padding: 8px;
    margin: 0;
    border: none;
    /* Source: panel_script_ed.xml:357 word_wrap="true". Was `pre` + `overflow-wrap:
       normal` inside a 100%-width textarea with overflow hidden, so anything past the
       right edge was clipped and unreachable — no wrap AND no horizontal scrollbar.
       break-word keeps an over-long single token (a URL in a string) reachable too. */
    white-space: pre-wrap;
    overflow-wrap: break-word;
    word-wrap: break-word;
    tab-size: 4;
    -moz-tab-size: 4;
    letter-spacing: normal;
    word-spacing: normal;
}

/* Highlight overlay (renders colored text behind textarea) */
.lsl-highlight-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background: transparent;
    color: #e0e0e0;
    overflow: hidden;
}

/* One block per logical line: the highlighter already emits balanced per-line HTML
   (lsl_syntax.js:33-45), and a block per line is what lets the gutter measure where
   each logical line starts and how tall it wrapped to. */
.lsl-highlight-layer .lsl-row {
    display: block;
    min-height: 1.4em;
}

.lsl-highlight-layer code {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    display: block;
    /* offsetParent for the rows, so row.offsetTop is measured from the code box */
    position: relative;
}

/* Textarea (editable, transparent text) */
.lsl-textarea {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    resize: none;
    background: transparent;
    color: transparent;
    caret-color: #e0e0e0;
    outline: none;
    z-index: 1;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
}

.lsl-textarea::selection {
    background: rgba(100, 150, 255, 0.3);
    color: transparent;
}

.lsl-textarea::-moz-selection {
    background: rgba(100, 150, 255, 0.3);
    color: transparent;
}

/* Syntax highlighting token colors */
.lsl-control { color: #c678dd; }           /* if, else, for, while, do, return, state, jump */
.lsl-type { color: #61afef; }              /* integer, float, string, vector, rotation, key, list */
.lsl-function { color: #56b6c2; }          /* ll* functions */
.lsl-ossl-function { color: #e06c75; }     /* os* functions */
.lsl-event { color: #e5c07b; }             /* state_entry, touch_start, etc. */
.lsl-constant { color: #d19a66; }          /* AGENT, TRUE, FALSE, named constants */
.lsl-ossl-constant { color: #d19a66; }     /* OSSL constants */
.lsl-string { color: #98c379; }            /* "string literals" */
.lsl-comment { color: #5c6370; font-style: italic; } /* // and /* comments */
.lsl-number { color: #d19a66; }            /* 0, 1.5, 0xFF */
.lsl-label { color: #c678dd; }             /* @label */
.lsl-state-name { color: #e5c07b; font-weight: bold; } /* state names (default, custom) */

/* Autocomplete dropdown */
.lsl-autocomplete {
    position: absolute;
    z-index: 1000;
    display: none;
    background: #1e1e30;
    border: 1px solid #3a3a5a;
    border-radius: 4px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
    max-height: 200px;
    overflow-y: auto;
    min-width: 250px;
    max-width: 400px;
}

.lsl-autocomplete.visible {
    display: block;
}

.lsl-ac-item {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    cursor: pointer;
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 12px;
    color: #e0e0e0;
    gap: 6px;
    white-space: nowrap;
}

.lsl-ac-item:hover,
.lsl-ac-item.selected {
    background: rgba(100, 150, 255, 0.2);
}

.lsl-ac-item .lsl-ac-icon {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.lsl-ac-icon.function { background: #56b6c2; }
.lsl-ac-icon.ossl_function { background: #e06c75; }
.lsl-ac-icon.event { background: #e5c07b; }
.lsl-ac-icon.constant,
.lsl-ac-icon.ossl_constant { background: #d19a66; }
.lsl-ac-icon.type { background: #61afef; }
.lsl-ac-icon.control { background: #c678dd; }

.lsl-ac-item .lsl-ac-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lsl-ac-item .lsl-ac-type {
    color: #5c6370;
    font-size: 11px;
    margin-left: auto;
    flex-shrink: 0;
}

/* Autocomplete tooltip panel */
.lsl-ac-tooltip {
    position: absolute;
    z-index: 1001;
    display: none;
    background: #1e1e30;
    border: 1px solid #3a3a5a;
    border-radius: 4px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
    padding: 8px 10px;
    max-width: 400px;
    min-width: 200px;
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 11px;
    color: #e0e0e0;
    line-height: 1.5;
}

.lsl-ac-tooltip.visible {
    display: block;
}

.lsl-ac-tooltip .lsl-tt-sig {
    color: #56b6c2;
    font-weight: bold;
    margin-bottom: 6px;
    word-wrap: break-word;
    white-space: pre-wrap;
}

.lsl-ac-tooltip .lsl-tt-desc {
    color: #aaa;
    font-style: normal;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 11px;
    white-space: pre-wrap;
    word-wrap: break-word;
    max-height: 150px;
    overflow-y: auto;
}

.lsl-ac-tooltip .lsl-tt-meta {
    color: #5c6370;
    font-size: 10px;
    margin-top: 4px;
    border-top: 1px solid #2a2a4a;
    padding-top: 4px;
}