.cljs-html-display {
    max-width: 800px;
    margin: 0px auto 0px auto;
    padding: 0px 10px;
    background: #1c1c1c;
    border: 0px solid #222;
    color: #ccc;
    font-family: monospace;
    font-size: 14px;
    overflow: hidden;
    opacity: 0;
    transition: all 0.3s ease;
    max-height: 0;
}

.cljs-html-display.active {
    max-height: 1000px;
    border: 1px solid #222;
    padding: 5px 10px;
    opacity: 1;
}

.cljs-html-display.fade-out {
    opacity: 0;
    border: 1px solid white;
}

.cljs-inline-editor {
    font-family: monospace;
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    font-size: 14px;
    line-height: 1.5;
    background-color: #0C1021;
}

.cljs-html-display p {
    font-family: monospace;
    position: relative;
    font-size: 14px;
    line-height: 1.5;
    margin-top: 0.85em;
    margin-bottom: 0.85em;
}

.cljs-html-display h1,
.cljs-html-display h2,
.cljs-html-display h3,
.cljs-html-display h4,
.cljs-html-display h5 {
    font-family: monospace;
    position: relative;
    color: #ccc;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    text-transform: none;
}


.cljs-editor-new {
    margin-bottom: 1.75em;
}

/* Container for the editor */
.cljs-editor-container {
    font-family: monospace;
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    border: 1px solid #222;
    background-color: #0C1021;
    font-size: 14px;
    line-height: 1.5;
    height: 300px;
    overflow: hidden;
}
/* The syntax-highlighted overlay appears on top */
.cljs-editor-overlay {
    font-family: monospace;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0px;
    overflow: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    pointer-events: none;
    color: rgb(204,204,204); 
    margin: 5px;
}

.cljs-editor-overlay .overlay {
    background-color: rgb(26,26,26);
    color: #F92672;
    border: 1px solid black;
}

/* The textarea is behind the overlay.
       Its text is transparent so that only the caret is visible. */
textarea.cljs-editor-textarea {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    padding: 0px;
    background-color: transparent;
    color: transparent;
    caret-color: rgb(53,254,70);
    overflow: auto;
    resize: none;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;

    white-space: pre-wrap;
    word-wrap: break-word;
    scrollbar-width: none;
    outline:none;
    margin: 5px;
   
}

.cljs-editor-error {
    max-width: 800px;
    margin: 0px auto;
    padding: 5px 10px;
    background: #1c1c1c;
    border: 1px solid #222;
    color: #FF6B6B;  /* Error red color */
    font-family: monospace;
    font-size: 14px;
    min-height: 1.5em;
    display: block;
}

/* Chord state and action feedback display */
.cljs-chord-display {
    max-width: 800px;
    margin: 0px auto;
    padding: 5px 10px;
    background: #4D4D4D;
    border: 1px solid #222;
    color: #F92672;
    font-family: monospace;
    font-size: 14px;
    min-height: 2em;
}

/* Syntax highlighting rules (colors inspired by deeper–blue) */
.token-comment { color: rgb(127,127,127); }
.token-string  { color: rgb(221,184,140); }
/* .token-number  { color: #AE81FF; } */
.token-keyword { color: rgb(163,202,102); }

.token-special-form { color: rgb(35,190,251); }
.token-paren   { color: rgb(100,100,100); }
.token-symbol  { color: rgb(204,204,204); }

.token-paren.highlight {
    background-color: rgb(35,190,251, 0.45);
    color: rgb(210,210,210);
}

.token-paren.unbalanced {
    background-color: rgb(157,38,233);
    color: white;
}