)
* which still cover the body::before. Fix: emit the same grid
* pattern as a background-image on these surfaces themselves —
* background-image stacks ABOVE background-color on the same
* element, so the grid lands on top of the dark fill but below
* the chat content. Bg-size 40px matches admin's grid pitch. */
.bg-presentation,
.bg-surface-chat,
main.bg-presentation,
main[class*="presentation"],
main {
background-color: #0a0e1a !important;
background-image:
linear-gradient(rgba(86, 214, 255, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(86, 214, 255, 0.05) 1px, transparent 1px) !important;
background-size: 40px 40px !important;
background-attachment: fixed !important;
}
/* ── 3. Sidebar — glass with cyan border ──────────────────────────── */
nav,
.nav,
[data-testid="nav"],
[role="navigation"] {
background-color: rgba(15, 21, 48, 0.78) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
border-right: 1px solid #1f2a44 !important;
}
.nav-open-button,
.nav-close-button {
color: #97a0c2 !important;
}
.nav-open-button:hover,
.nav-close-button:hover {
background-color: rgba(86, 214, 255, 0.10) !important;
color: #56d6ff !important;
}
/* Sidebar conversation rows — refined hover + active state.
* v1's `[class*="from-presentation"]` selector accidentally matched
* the gradient on the active-row indicator, painting the entire row
* with the bright cy→vi gradient. v2 removes that and uses a soft
* left-border accent like the admin's row-clickable pattern. */
nav a, nav li, nav button,
[role="navigation"] a,
[role="navigation"] li {
border-radius: 8px !important;
}
nav a:hover, nav li:hover {
background-color: rgba(86, 214, 255, 0.06) !important;
}
nav a[aria-current="page"],
nav a.active,
nav li[aria-selected="true"],
nav [data-active="true"] {
background-color: rgba(86, 214, 255, 0.10) !important;
border-left: 2px solid #56d6ff !important;
padding-left: 10px !important;
}
/* Kill the overactive cy→vi gradient on the active-row block. The
* default LibreChat dark theme uses a `from-presentation` gradient
* fragment for that block; on our palette it's the wrong colour and
* over-saturated. Force its background to a flat soft tint. */
nav .from-presentation,
nav [class*="from-presentation"],
nav [class*="bg-gradient"] {
background-image: none !important;
background-color: transparent !important;
}
/* Conversation timestamp dot */
.conversation-item-time:before {
background-color: #56d6ff !important;
}
/* ── 4. Message bubbles — glass-card frame ────────────────────────── */
/* Message bubbles — heavily transparent glass so the grid pattern
* from .bg-presentation reads clearly THROUGH the bubble itself,
* not just at the edges.
*
* Tuning history:
* v2: 0.45 alpha, 4px blur — solid, grid hidden
* v3: 0.22 alpha, 6px blur — grid faint at edges only
* v4: 0.08 alpha, 2px blur — grid reads through the bubble body
*
* The cyan border at 0.22 alpha is the main visual containment
* device now; the fill is barely there. A tiny 2px blur softens
* the high-frequency grid lines under the text just enough to
* keep body copy readable, without becoming a frosted pane that
* hides the pattern. */
.message-content {
background-color: rgba(15, 21, 48, 0.08) !important;
border: 1px solid rgba(86, 214, 255, 0.22) !important;
border-radius: 12px !important;
padding: 14px 16px !important;
backdrop-filter: blur(2px) !important;
-webkit-backdrop-filter: blur(2px) !important;
box-shadow: 0 4px 20px -10px rgba(0, 0, 0, 0.4) !important;
}
.text-message {
color: #d8dbe8 !important;
}
/* User-side messages: faintly cyan-tinted, same near-transparent
* fill so grid shows as cleanly here as in assistant bubbles. */
[data-message-role="user"] .message-content,
[class*="UserMessage"] .message-content {
background-color: rgba(86, 214, 255, 0.05) !important;
border-color: rgba(86, 214, 255, 0.28) !important;
}
/* ── 5. Chat input box — glass-card composer ──────────────────────── */
textarea,
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
[contenteditable="true"] {
background-color: rgba(15, 21, 48, 0.6) !important;
color: #d8dbe8 !important;
border-color: #2a3b5d !important;
caret-color: #56d6ff !important;
}
textarea::placeholder,
input::placeholder,
[contenteditable="true"]:empty::before {
color: #5b6685 !important;
}
textarea:focus,
input:focus,
[contenteditable="true"]:focus {
border-color: #56d6ff !important;
box-shadow:
0 0 0 1px rgba(86, 214, 255, 0.4),
0 0 16px rgba(86, 214, 255, 0.18) !important;
outline: none !important;
}
/* The composer container at the bottom — exactly ONE glass card.
*
* Iteration history:
* v3: rounded the textarea AND its wrapper → 2 rounded rects.
* v4: zeroed the textarea border, kept the wrapper rules → STILL
* 2 rounded rects, because a
sits between the