Gallery
9 images
Palette
8 colors · 6 settings
dark
- Secondary
#5d6da5 - Background
#0e1120 - Text
#c8caee - Danger
#e08aa0 - Success
#8fd6c8 - Warning
#e8d6a0 - Speech
#c8caee - Thoughts
#b0aed8
Theme controls
- Accent color
- 232° · 30% · 63%
- Preferred mode
- dark
- Corner scale
- 0
- Glass surfaces
- No
- Type scale
- 1
- Character-aware colors
- No
Stylesheets
1 stylesheet
/* ============================================
F.A.Y.E. O.S. — Lumiverse Theme
============================================ */
@font-face {
font-family: 'VT323';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(assets/fonts/vt323-400-normal.woff2) format('woff2');
}
@font-face {
font-family: 'Pixelify Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(assets/fonts/pixelify-sans-400-normal.woff2) format('woff2');
}
@font-face {
font-family: 'Pixelify Sans';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(assets/fonts/pixelify-sans-700-normal.woff2) format('woff2');
}
:root {
/* ---- F.A.Y.E. palette — change these to recolour the theme ---- */
--faye-bg: #0e1120;
--faye-bg-deep: #0a0d1c;
--faye-panel: #1a1f35;
--faye-panel-alt: #1e2440;
--faye-panel-dark: #111626;
--faye-lavender: #9896bb;
--faye-periwinkle: #5d6da5;
--faye-periwinkle-light: #7e83ce;
--faye-indigo: #344979;
--faye-violet: #4b4f8b;
--faye-border-soft: #2d315c;
--faye-border-dark: #1c1d30;
--faye-text: #c8caee;
--faye-text-soft: #d4d3e8;
--faye-text-dim: #b0aed8;
--faye-white: #ffffff;
--faye-pink: #e08aa0;
--faye-purple: #a58bd8;
--faye-mint: #8fd6c8;
--faye-yellow: #e8d6a0;
--faye-tb-pink: linear-gradient(to right, var(--faye-periwinkle), var(--faye-lavender) 60%, var(--faye-pink));
--faye-tb-char: linear-gradient(to right, var(--faye-periwinkle) 0%, var(--faye-lavender) 50%, var(--faye-periwinkle) 100%);
/* ---- status panel text (the little "profile.exe" readout) ----
\A = new line. Set to "" to blank it. */
--faye-status-char: "faye@os:~$ load char.bmp\A> status: online \25CF\A> mood: sleepy (_\3000_)\002E\A> hp: \2665 \2665 \2665 \2665 \2665\A> ready to chat \2665\A faye@os:~$ \2588";
--faye-status-user: "faye@os:~$ load user.bmp\A> status: active \25CF\A> mood: lazy (\B4\FFE3\0060)\A> hp: \2661 \2661 \2661 \2661 \2661\A> ready to chat \2661\A faye@os:~$ \2588";
scrollbar-color: var(--faye-periwinkle) var(--faye-bg);
}
/* ===================== BACKGROUND ===================== */
html, body {
background:
radial-gradient(circle, rgba(93,109,165,0.2) 1px, transparent 1px),
linear-gradient(180deg, var(--faye-bg) 0%, var(--faye-bg-deep) 100%) !important;
background-size: 8px 8px, 100% 100% !important;
}
#root, #root > * { background: transparent !important; }
body { font-family: 'Pixelify Sans', monospace !important; }
/* ===================== SCROLLBARS ===================== */
::-webkit-scrollbar { width: 12px; background: var(--faye-bg); }
::-webkit-scrollbar-thumb { background: var(--faye-periwinkle); border: 2px solid var(--faye-indigo); border-radius: 0 !important; }
::-webkit-scrollbar-track { background: var(--faye-bg); }
/* ===================== THINKING BLOCK RENAME ===================== */
/* Hide original "Thinking" label text, replace with LOADING... */
[data-reasoning-toggle="true"] [class*="label" i] {
font-size: 0 !important;
line-height: 0 !important;
}
[data-reasoning-toggle="true"] [class*="label" i]::after {
content: 'LOADING...' !important;
font-family: 'VT323', monospace !important;
font-size: 14px !important;
line-height: 1 !important;
color: var(--faye-text-dim) !important;
letter-spacing: 0.5px !important;
}
/* style the whole toggle row */
[data-reasoning-toggle="true"] {
font-family: 'VT323', monospace !important;
background: var(--faye-panel-dark) !important;
border: 1px solid var(--faye-indigo) !important;
border-radius: 0 !important;
padding: 3px 8px !important;
color: var(--faye-text-dim) !important;
}
/* ═══ MINIMAL MESSAGE ═══ */
[data-component="MinimalMessage"] {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
margin-bottom: 28px !important;
max-width: 680px !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
font-family: 'Pixelify Sans', monospace !important;
}
[data-component="MinimalMessage"]::before,
[data-component="MinimalMessage"]::after { display: none !important; }
/* AVATAR WRAPPER — desktop keeps its own comfortable size, NOT the
full message width (that's mobile-only, overridden in the media
query below). Char sits left, user sits right via margin split. */
[data-component="MinimalMessage"] [class*="avatar" i]:not([class*="avatarFallback" i]) {
position: relative !important;
width: min(305px, 100%) !important;
height: auto !important;
margin-left: 0 !important;
margin-right: auto !important;
background: var(--faye-panel) !important;
border: 1.6px solid var(--faye-border-soft) !important;
border-radius: 0 !important;
box-shadow: 3px 3px 0 rgba(200,202,238,0.8) !important;
padding: 30px 10px 10px 10px !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: row !important;
align-items: flex-start !important;
gap: 14px !important;
margin-bottom: 0 !important;
overflow: hidden !important;
}
/* char pfp stays leftmost (base rule above); user pfp goes rightmost */
[data-component="MinimalMessage"][data-part="user"] [class*="avatar" i]:not([class*="avatarFallback" i]) {
flex-direction: row-reverse !important;
margin-left: auto !important;
margin-right: 0 !important;
border-color: var(--faye-border-dark) !important;
}
[data-component="MinimalMessage"] [class*="avatar" i]:not([class*="avatarFallback" i]) > div {
display: contents !important;
}
/* TITLE BAR */
[data-component="MinimalMessage"] [class*="avatar" i]:not([class*="avatarFallback" i])::before {
content: " profile.exe" !important;
position: absolute !important;
top: 0 !important; left: 0 !important; right: 0 !important;
height: 20px !important;
background: var(--faye-tb-char) !important;
color: var(--faye-white) !important;
font-family: 'VT323', monospace !important;
font-size: 13px !important;
line-height: 20px !important;
padding: 0 8px !important;
border-bottom: 2px solid var(--faye-indigo) !important;
white-space: nowrap !important;
z-index: 5 !important;
text-shadow: 1px 1px 0 rgba(52,73,121,0.4) !important;
pointer-events: none !important;
box-sizing: border-box !important;
}
[data-component="MinimalMessage"][data-part="user"] [class*="avatar" i]:not([class*="avatarFallback" i])::before {
content: "user.exe" !important;
}
/* AVATAR IMG — bleed removed, matches the clean centered mobile look */
[data-component="MinimalMessage"] [class*="avatar" i]:not([class*="avatarFallback" i]) img {
width: 100px !important;
height: 100px !important;
min-width: 100px !important;
max-width: 100px !important;
flex-shrink: 0 !important;
object-fit: cover !important;
object-position: top center !important;
border: 1.6px solid var(--faye-border-soft) !important;
border-radius: 0 !important;
display: block !important;
position: relative !important;
z-index: 1 !important;
translate: 0 0 !important;
}
[data-component="MinimalMessage"][data-part="user"] [class*="avatar" i]:not([class*="avatarFallback" i]) img {
translate: 0 0 !important;
}
/* STATUS PANEL */
[data-component="MinimalMessage"] [class*="avatar" i]:not([class*="avatarFallback" i])::after {
content: var(--faye-status-char) !important;
display: block !important;
flex: 1 1 auto !important;
height: 100px !important;
white-space: pre !important;
padding: 8px 10px !important;
font-family: 'VT323', monospace !important;
font-size: 12px !important;
line-height: 15px !important;
color: var(--faye-text) !important;
background: var(--faye-panel-dark) !important;
border: 2px solid var(--faye-indigo) !important;
border-radius: 0 !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
[data-component="MinimalMessage"][data-part="user"] [class*="avatar" i]:not([class*="avatarFallback" i])::after {
content: var(--faye-status-user) !important;
background: var(--faye-panel-dark) !important;
}
/* BUBBLE */
[data-component="MinimalMessage"] [class*="bubble" i] {
width: 100% !important;
max-width: none !important;
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* HEADER */
[data-component="MinimalMessage"] [class*="header" i] {
display: flex !important;
flex-direction: column !important;
padding: 0 !important;
margin: 0 !important;
gap: 0 !important;
}
[data-component="MinimalMessage"] [class*="header" i]::before {
content: '' !important;
display: block !important;
height: 5px !important;
background: var(--faye-tb-char) !important;
border-left: 2px solid var(--faye-indigo) !important;
border-right: 2px solid var(--faye-indigo) !important;
border-top: none !important;
border-bottom: none !important;
}
/* NAME BAR */
[data-theme-mode] [data-component="MinimalMessage"] [class*="name" i],
[data-theme-mode=dark] [data-component="MinimalMessage"] [class*="name" i] {
display: block !important;
font-family: 'VT323', monospace !important;
font-size: 15px !important;
letter-spacing: 0.5px !important;
background: var(--faye-lavender) !important;
background-clip: unset !important;
-webkit-background-clip: unset !important;
-webkit-text-fill-color: var(--faye-white) !important;
color: var(--faye-white) !important;
border-left: 2px solid var(--faye-indigo) !important;
border-right: 2px solid var(--faye-indigo) !important;
border-top: 2px solid var(--faye-lavender) !important;
border-bottom: 2px solid var(--faye-lavender) !important;
border-radius: 0 !important;
padding: 2px 8px !important;
text-shadow: 1px 1px 0 rgba(52,73,121,0.3) !important;
width: 100% !important;
box-sizing: border-box !important;
line-height: 1.4 !important;
}
[data-theme-mode] [data-component="MinimalMessage"][data-part="user"] [class*="name" i],
[data-theme-mode=dark] [data-component="MinimalMessage"][data-part="user"] [class*="name" i] {
background: var(--faye-periwinkle) !important;
border-top-color: var(--faye-periwinkle) !important;
border-bottom-color: var(--faye-periwinkle) !important;
-webkit-text-fill-color: var(--faye-white) !important;
}
/* HIDE META PILL */
[data-component="MinimalMessage"] [class*="metaPill" i] { display: none !important; }
/* MESSAGE CONTENT */
html [data-component="MinimalMessage"] [data-component="MessageContent"],
[data-theme-mode] [data-component="MinimalMessage"] [data-component="MessageContent"],
[data-theme-mode=dark] [data-component="MinimalMessage"] [data-component="MessageContent"] {
padding: 10px 14px 12px !important;
border: 2px solid var(--faye-indigo) !important;
border-top: none !important;
border-radius: 0 !important;
background-color: var(--faye-panel) !important;
background-image: repeating-linear-gradient(
to bottom,
transparent, transparent 22px,
rgba(152,150,187,0.15) 22px, rgba(152,150,187,0.15) 23px
) !important;
background-position: 0 30px !important;
font-family: 'Pixelify Sans', monospace !important;
font-size: 14px !important;
line-height: 22px !important;
color: var(--faye-text) !important;
box-shadow: 3px 3px 0 rgba(20,30,80,0.6) !important;
width: 100% !important;
box-sizing: border-box !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
html [data-component="MinimalMessage"][data-part="user"] [data-component="MessageContent"],
[data-theme-mode] [data-component="MinimalMessage"][data-part="user"] [data-component="MessageContent"] {
background-color: var(--faye-panel-dark) !important;
background-image: repeating-linear-gradient(
to bottom,
transparent, transparent 22px,
rgba(93,109,165,0.12) 22px, rgba(93,109,165,0.12) 23px
) !important;
}
[data-component="MinimalMessage"] [data-component="MessageContent"]::before,
[data-component="MinimalMessage"] [data-component="MessageContent"]::after { display: none !important; }
/* PROSE STYLES */
[data-component="MinimalMessage"] [data-component="MessageContent"] em,
[data-component="MinimalMessage"] [data-component="MessageContent"] [class*="proseItalic" i] {
color: var(--faye-text-dim) !important; font-style: italic;
}
[data-component="MinimalMessage"] [data-component="MessageContent"] strong,
[data-component="MinimalMessage"] [data-component="MessageContent"] [class*="proseBold" i] {
color: var(--faye-text) !important;
text-shadow: 1px 1px 0 rgba(198,198,232,0.5) !important;
}
/* code inline — default */
[data-component="MinimalMessage"] [data-component="MessageContent"] blockquote {
border-left: 4px solid var(--faye-periwinkle) !important;
background: var(--faye-panel-dark) !important;
padding: 6px 12px !important;
margin: 6px 0 !important;
font-style: italic;
color: var(--faye-text-dim) !important;
border-radius: 0 !important;
}
/* HEADINGS */
[data-component="MinimalMessage"] [data-component="MessageContent"] h1,
[data-component="MinimalMessage"] [data-component="MessageContent"] h2,
[data-component="MinimalMessage"] [data-component="MessageContent"] h3,
[data-component="MinimalMessage"] [data-component="MessageContent"] h4,
[data-component="MinimalMessage"] [data-component="MessageContent"] h5,
[data-component="MinimalMessage"] [data-component="MessageContent"] h6 {
font-family: 'VT323', monospace !important;
letter-spacing: 1.5px !important;
border-radius: 0 !important;
}
[data-component="MinimalMessage"] [data-component="MessageContent"] h1 {
display: block !important;
border: 2px solid var(--faye-indigo) !important;
box-shadow: 3px 3px 0 var(--faye-periwinkle) !important;
padding: 26px 10px 6px !important;
background: var(--faye-panel-dark) !important;
font-size: 22px !important;
text-transform: uppercase !important;
color: var(--faye-text) !important;
position: relative !important;
margin: 8px 0 !important;
}
[data-component="MinimalMessage"] [data-component="MessageContent"] h1::before {
content: '' !important;
display: block !important;
position: absolute !important;
top: 0 !important; left: 0 !important; right: 0 !important;
height: 22px !important;
line-height: 20px !important;
padding: 1px 8px !important;
font-size: 14px !important;
background: var(--faye-tb-char) !important;
color: var(--faye-white) !important;
border-bottom: 2px solid var(--faye-indigo) !important;
white-space: nowrap !important;
overflow: hidden !important;
font-family: 'VT323', monospace !important;
box-sizing: border-box !important;
}
[data-component="MinimalMessage"] [data-component="MessageContent"] h1::after {
content: '_ [ ] X' !important;
position: absolute !important;
top: 0 !important; right: 8px !important;
height: 22px !important;
line-height: 20px !important;
font-size: 11px !important;
color: var(--faye-white) !important;
font-family: 'VT323', monospace !important;
letter-spacing: 1px !important;
}
[data-component="MinimalMessage"] [data-component="MessageContent"] h2 {
font-size: 20px !important;
text-transform: uppercase !important;
color: var(--faye-text) !important;
border-bottom: 2px dashed var(--faye-text-dim) !important;
padding: 0 0 3px !important;
background: transparent !important;
margin: 8px 0 4px !important;
}
[data-component="MinimalMessage"] [data-component="MessageContent"] h2::before { content: '>> ' !important; }
[data-component="MinimalMessage"] [data-component="MessageContent"] h3 {
font-size: 18px !important;
color: var(--faye-text-dim) !important;
border-left: 3px dotted var(--faye-lavender) !important;
padding: 0 0 0 10px !important;
background: transparent !important;
margin: 6px 0 !important;
}
[data-component="MinimalMessage"] [data-component="MessageContent"] h3::before { content: '>_ ' !important; }
[data-component="MinimalMessage"] [data-component="MessageContent"] h4 {
display: inline-block !important;
font-size: 15px !important;
color: var(--faye-text) !important;
background: var(--faye-panel-dark) !important;
border: 1px solid var(--faye-periwinkle) !important;
padding: 1px 6px !important;
letter-spacing: 1px !important;
margin: 4px 0 !important;
}
[data-component="MinimalMessage"] [data-component="MessageContent"] h5,
[data-component="MinimalMessage"] [data-component="MessageContent"] h6 {
font-size: 14px !important; color: var(--faye-text-dim) !important;
}
/* ACTIONS — per-message hover row (edit/copy/hide/anchor/branch/delete).
Covers both MinimalMessage and BubbleMessage since the extension
only ever toggled opacity before — the buttons themselves were
rendering in native unstyled gray. Flat/minimal, matching the
actionBtn look used elsewhere. */
[data-component="MinimalMessage"] [class*="actionsWrap" i],
[data-component="BubbleMessage"] [class*="actionsWrap" i] {
opacity: 0.4;
transition: opacity 0.2s;
}
[data-component="MinimalMessage"]:hover [class*="actionsWrap" i],
[data-component="BubbleMessage"]:hover [class*="actionsWrap" i] {
opacity: 1;
}
[data-component="MinimalMessage"] [class*="actionsWrap" i] button,
[data-component="BubbleMessage"] [class*="actionsWrap" i] button {
background: transparent !important;
border: none !important;
border-radius: 0 !important;
color: var(--faye-text-dim) !important;
padding: 3px 6px !important;
}
[data-component="MinimalMessage"] [class*="actionsWrap" i] button:hover,
[data-component="BubbleMessage"] [class*="actionsWrap" i] button:hover {
background: var(--faye-indigo) !important;
color: var(--faye-white) !important;
}
[data-component="MinimalMessage"] [class*="actionsWrap" i] svg,
[data-component="BubbleMessage"] [class*="actionsWrap" i] svg {
stroke: currentColor !important;
}
/* ═══ BUBBLE MESSAGE ═══ */
[data-component="BubbleMessage"] { font-family: 'Pixelify Sans', monospace !important; }
[data-theme-mode] [data-component="BubbleMessage"] [class*="name" i],
[data-theme-mode=dark] [data-component="BubbleMessage"] [class*="name" i] {
font-family: 'VT323', monospace !important;
font-size: 16px !important;
background: transparent !important;
background-clip: unset !important;
-webkit-background-clip: unset !important;
-webkit-text-fill-color: var(--faye-lavender) !important;
color: var(--faye-lavender) !important;
letter-spacing: 0.5px !important;
}
[data-theme-mode] [data-component="BubbleMessage"][data-part="user"] [class*="name" i] {
-webkit-text-fill-color: var(--faye-periwinkle) !important;
color: var(--faye-periwinkle) !important;
}
html [data-component="BubbleMessage"] [data-component="MessageContent"],
[data-theme-mode] [data-component="BubbleMessage"] [data-component="MessageContent"] {
background-color: var(--faye-panel) !important;
background-image: repeating-linear-gradient(
to bottom, transparent, transparent 22px,
rgba(152,150,187,0.1) 22px, rgba(152,150,187,0.1) 23px
) !important;
background-position: 0 8px !important;
border: 2px solid var(--faye-indigo) !important;
border-radius: 0 !important;
font-family: 'Pixelify Sans', monospace !important;
font-size: 14px !important;
color: var(--faye-text) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
[data-theme-mode] [data-component="BubbleMessage"][data-part="user"] [data-component="MessageContent"] {
background-color: var(--faye-panel-dark) !important;
border-color: var(--faye-periwinkle) !important;
}
[data-component="BubbleMessage"] [data-component="MessageContent"]::before,
[data-component="BubbleMessage"] [data-component="MessageContent"]::after { display: none !important; }
/* ════════════════════════════════════════════════════════════
RESPONSE INSTRUCTIONS EXTENSION — F.A.Y.E. OS skin
github.com/bumyann/Lumiverse-Response-Instructions
════════════════════════════════════════════════════════════ */
/* RI CSS variable overrides — scoped so they don't bleed */
#ri-strip,
#ri-float-btn {
--lumiverse-bg: var(--faye-bg);
--lumiverse-surface: var(--faye-panel);
--lumiverse-fill: var(--faye-panel);
--lumiverse-fill-hover:var(--faye-panel-alt);
--lumiverse-border: rgba(93,109,165,0.6);
--lumiverse-text: var(--faye-text);
--lumiverse-text-dim: var(--faye-text-dim);
--lumiverse-accent: var(--faye-lavender);
}
/* STRIP CONTAINER */
#ri-strip {
background: var(--faye-panel-dark) !important;
border: 2px solid var(--faye-indigo) !important;
border-radius: 0 !important;
box-shadow: 3px 3px 0 rgba(20,30,80,0.8) !important;
font-family: 'Pixelify Sans', monospace !important;
}
/* TAB ROW — Win9x title bar */
#ri-strip-tabs {
background: linear-gradient(to right, var(--faye-periwinkle) 0%, var(--faye-lavender) 50%, var(--faye-periwinkle) 100%) !important;
border-bottom: 2px solid var(--faye-indigo) !important;
border-radius: 0 !important;
padding: 0 4px !important;
display: flex !important;
align-items: center !important;
gap: 2px !important;
}
.ri-stab {
font-family: 'VT323', monospace !important;
font-size: 13px !important;
letter-spacing: 0.5px !important;
color: rgba(255,255,255,0.75) !important;
background: transparent !important;
border: none !important;
border-radius: 0 !important;
padding: 2px 8px !important;
cursor: pointer !important;
text-shadow: 1px 1px 0 rgba(52,73,121,0.4) !important;
transition: color 0.1s !important;
}
.ri-stab:hover {
color: var(--faye-white) !important;
background: rgba(255,255,255,0.1) !important;
}
.ri-stab.active {
color: var(--faye-white) !important;
background: rgba(255,255,255,0.15) !important;
border-bottom: 2px solid var(--faye-white) !important;
}
/* close button */
#ri-strip-close {
font-family: 'VT323', monospace !important;
font-size: 13px !important;
color: rgba(255,255,255,0.8) !important;
background: transparent !important;
border: none !important;
margin-left: auto !important;
cursor: pointer !important;
padding: 2px 6px !important;
}
#ri-strip-close:hover { color: var(--faye-white) !important; background: rgba(255,255,255,0.15) !important; }
/* on-dot */
.ri-on-dot {
width: 6px !important; height: 6px !important;
background: var(--faye-indigo) !important;
border-radius: 50% !important;
display: inline-block !important;
}
.ri-on-dot.on { background: var(--faye-mint) !important; }
/* PANELS */
.ri-spanel {
background: var(--faye-panel-dark) !important;
padding: 8px 10px !important;
}
/* TOOLBAR */
.ri-toolbar {
background: var(--faye-panel) !important;
border: 2px solid var(--faye-indigo) !important;
border-bottom: none !important;
border-radius: 0 !important;
padding: 3px 6px !important;
display: flex !important;
align-items: center !important;
gap: 4px !important;
}
/* ON/OFF TOGGLE */
#ri-toggle,
.ri-toggle {
font-family: 'VT323', monospace !important;
font-size: 13px !important;
letter-spacing: 0.5px !important;
background: var(--faye-panel) !important;
color: var(--faye-text-dim) !important;
border: 2px solid var(--faye-indigo) !important;
border-radius: 0 !important;
padding: 1px 8px !important;
cursor: pointer !important;
box-shadow: 1px 1px 0 rgba(255,255,255,0.05), 2px 2px 0 var(--faye-indigo) !important;
transition: background 0.1s !important;
}
#ri-toggle.on,
.ri-toggle.on {
background: var(--faye-indigo) !important;
color: var(--faye-white) !important;
box-shadow: inset 1px 1px 0 var(--faye-periwinkle) !important;
}
/* ICON BUTTONS — ri-btn-ri / ri-btn-wfm / ri-btn-tpl, the toolbar row
just above the composer. Kept flat/minimal to match the native
actionBar row above it (no chunky border/box-shadow — just an
icon and a hover fill, terminal-minimal). */
.ri-icon-btn {
font-family: 'Pixelify Sans', monospace !important;
background: transparent !important;
color: var(--faye-text-dim) !important;
border: none !important;
border-radius: 0 !important;
padding: 3px 6px !important;
cursor: pointer !important;
box-shadow: none !important;
transition: background 0.13s, color 0.13s !important;
}
.ri-icon-btn:hover {
background: var(--faye-indigo) !important;
color: var(--faye-white) !important;
box-shadow: none !important;
}
.ri-icon-btn.ri-on {
background: var(--faye-indigo) !important;
color: var(--faye-white) !important;
}
.ri-icon-btn:active { transform: none !important; }
.ri-icon-btn.danger:hover { background: var(--faye-pink) !important; color: var(--faye-white) !important; }
/* TEXTAREAS */
.ri-textarea,
#ri-textarea,
#wfm-instruction,
#wfm-draft {
font-family: 'Pixelify Sans', monospace !important;
font-size: 13px !important;
background: var(--faye-panel) !important;
color: var(--faye-text) !important;
border: 2px solid var(--faye-indigo) !important;
border-radius: 0 !important;
padding: 8px 10px !important;
resize: vertical !important;
line-height: 1.6 !important;
background-image: repeating-linear-gradient(
to bottom,
transparent, transparent 24px,
rgba(152,150,187,0.1) 24px, rgba(152,150,187,0.1) 25px
) !important;
background-position: 0 8px !important;
}
.ri-textarea:focus,
#ri-textarea:focus,
#wfm-instruction:focus,
#wfm-draft:focus {
outline: 2px solid var(--faye-periwinkle) !important;
border-color: var(--faye-periwinkle) !important;
}
.ri-textarea::placeholder,
#ri-textarea::placeholder { color: var(--faye-periwinkle) !important; font-family: 'VT323', monospace !important; }
/* WFM NAV */
#wfm-nav { display: none; }
#wfm-nav.visible {
display: flex !important;
align-items: center !important;
gap: 6px !important;
padding: 4px 0 !important;
}
#wfm-prev, #wfm-next {
font-family: 'VT323', monospace !important;
font-size: 16px !important;
background: var(--faye-panel) !important;
color: var(--faye-lavender) !important;
border: 2px solid var(--faye-indigo) !important;
border-radius: 0 !important;
padding: 0 6px !important;
cursor: pointer !important;
}
#wfm-prev:hover, #wfm-next:hover { background: var(--faye-indigo) !important; color: var(--faye-white) !important; }
#wfm-counter {
font-family: 'VT323', monospace !important;
font-size: 13px !important;
color: var(--faye-text-dim) !important;
}
/* WFM ACTION BUTTONS */
.wfm-btn {
font-family: 'Pixelify Sans', monospace !important;
background: var(--faye-panel) !important;
color: var(--faye-text) !important;
border: 2px solid var(--faye-indigo) !important;
border-radius: 0 !important;
padding: 3px 10px !important;
cursor: pointer !important;
box-shadow: 1px 1px 0 rgba(255,255,255,0.05), 2px 2px 0 var(--faye-indigo) !important;
}
.wfm-btn:hover { background: var(--faye-lavender) !important; color: var(--faye-white) !important; }
.wfm-btn:active { box-shadow: inset 1px 1px 0 var(--faye-indigo) !important; transform: translate(1px,1px) !important; }
.wfm-btn.primary {
background: var(--faye-periwinkle) !important;
color: var(--faye-white) !important;
border-color: var(--faye-indigo) !important;
}
.wfm-btn.primary:hover { background: var(--faye-lavender) !important; }
/* WFM loading */
#wfm-loading { display: none; color: var(--faye-text-dim) !important; font-family: 'VT323', monospace !important; font-size: 13px !important; }
#wfm-loading.visible { display: block !important; }
/* FLOAT BUTTON */
#ri-float-btn {
background: var(--faye-panel) !important;
border: 2px solid var(--faye-indigo) !important;
border-radius: 0 !important;
box-shadow: 2px 2px 0 rgba(20,30,80,0.8) !important;
color: var(--faye-lavender) !important;
font-family: 'VT323', monospace !important;
font-size: 16px !important;
cursor: pointer !important;
transition: background 0.15s !important;
}
#ri-float-btn:hover,
#ri-float-btn.active {
background: var(--faye-indigo) !important;
color: var(--faye-white) !important;
box-shadow: -2px -2px 0 rgba(20,30,80,0.8) !important;
}
#ri-float-btn .ri-btn-label { color: inherit !important; font-family: 'VT323', monospace !important; }
#ri-float-btn .ri-btn-dot { background: var(--faye-indigo) !important; }
#ri-float-btn .ri-btn-dot.on { background: var(--faye-mint) !important; }
/* PRESET MODAL */
.ri-preset-list {
background: var(--faye-panel) !important;
border: 2px solid var(--faye-indigo) !important;
border-radius: 0 !important;
}
.ri-preset-row {
background: var(--faye-panel-dark) !important;
border-bottom: 1px solid rgba(93,109,165,0.3) !important;
padding: 6px 10px !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
}
.ri-preset-row:hover { background: var(--faye-panel) !important; }
.ri-preset-name {
font-family: 'Pixelify Sans', monospace !important;
color: var(--faye-text) !important;
font-size: 13px !important;
}
.ri-preset-del {
font-family: 'VT323', monospace !important;
color: var(--faye-text-dim) !important;
background: transparent !important;
border: 1px solid var(--faye-indigo) !important;
border-radius: 0 !important;
cursor: pointer !important;
padding: 0 4px !important;
}
.ri-preset-del:hover { color: var(--faye-pink) !important; border-color: var(--faye-pink) !important; }
.ri-preset-empty {
font-family: 'VT323', monospace !important;
color: var(--faye-periwinkle) !important;
font-size: 13px !important;
padding: 8px !important;
}
.ri-preset-save-row {
background: var(--faye-panel-dark) !important;
border-top: 2px solid var(--faye-indigo) !important;
padding: 6px 10px !important;
display: flex !important;
gap: 6px !important;
}
.ri-preset-input {
font-family: 'Pixelify Sans', monospace !important;
background: var(--faye-panel) !important;
color: var(--faye-text) !important;
border: 2px solid var(--faye-indigo) !important;
border-radius: 0 !important;
padding: 3px 8px !important;
flex: 1 !important;
}
.ri-preset-input:focus { outline: 2px solid var(--faye-periwinkle) !important; }
/* ═══ MOBILE ═══ */
@media (max-width: 720px) {
[data-component="MinimalMessage"] {
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
[data-component="MinimalMessage"] [class*="avatar" i]:not([class*="avatarFallback" i]),
[data-component="MinimalMessage"][data-part="user"] [class*="avatar" i]:not([class*="avatarFallback" i]) {
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
height: auto !important;
padding: 30px 10px 10px 10px !important;
gap: 14px !important;
}
[data-component="MinimalMessage"] [class*="avatar" i]:not([class*="avatarFallback" i]) img {
width: 100px !important; height: 100px !important;
min-width: 100px !important; max-width: 100px !important;
translate: 0 0 !important;
}
[data-component="MinimalMessage"][data-part="user"] [class*="avatar" i]:not([class*="avatarFallback" i]) img {
translate: 0 0 !important;
}
[data-component="MinimalMessage"] [class*="avatar" i]:not([class*="avatarFallback" i])::after {
height: 100px !important; font-size: 12px !important; line-height: 15px !important; padding: 8px 10px !important;
}
}
/* ===================== LUMIVERSE SUITE — QUICK TOOLBAR (unchanged, working) ===================== */
[data-lumiverse-module="quick_toolbar"] {
--lumiverse-surface-raised: var(--faye-panel-dark);
--lumiverse-border-subtle: var(--faye-indigo);
--lumiverse-border: var(--faye-indigo);
--lumiverse-border-hover: var(--faye-periwinkle);
--lumiverse-text-primary: var(--faye-text);
--lumiverse-text-muted: var(--faye-text-dim);
--lumiverse-primary: var(--faye-lavender);
--lumiverse-surface-hover: var(--faye-indigo);
--lumiverse-fill-subtle: rgba(93,109,165,0.08);
}
[data-lumiverse-module="quick_toolbar"].lumiverse-quick-toolbar,
[data-lumiverse-module="quick_toolbar"].lumiverse-quick-toolbar__context-strip,
[data-lumiverse-module="quick_toolbar"].lumiverse-quick-toolbar__customize {
background: var(--faye-panel-dark) !important;
border: 2px solid var(--faye-indigo) !important;
border-radius: 0 !important;
box-shadow: 3px 3px 0 rgba(20,30,80,0.8) !important;
backdrop-filter: none !important;
font-family: 'Pixelify Sans', monospace !important;
}
[data-lumiverse-module="quick_toolbar"] .lumiverse-quick-toolbar__action,
[data-lumiverse-module="quick_toolbar"] .lumiverse-quick-toolbar__control,
[data-lumiverse-module="quick_toolbar"].lumiverse-quick-toolbar__context-settings {
border-radius: 0 !important;
color: var(--faye-text-dim) !important;
}
[data-lumiverse-module="quick_toolbar"] .lumiverse-quick-toolbar__action:hover,
[data-lumiverse-module="quick_toolbar"] .lumiverse-quick-toolbar__action[aria-pressed="true"],
[data-lumiverse-module="quick_toolbar"].lumiverse-quick-toolbar__context-settings:hover {
border-color: var(--faye-periwinkle) !important;
background: var(--faye-indigo) !important;
color: var(--faye-white) !important;
}
[data-lumiverse-module="quick_toolbar"] .lumiverse-quick-toolbar__icon {
border-radius: 0 !important;
border: 1px solid var(--faye-indigo) !important;
color: var(--faye-lavender) !important;
}
[data-lumiverse-module="quick_toolbar"] .lumiverse-quick-toolbar__label,
[data-lumiverse-module="quick_toolbar"].lumiverse-quick-toolbar__context-label {
font-family: 'VT323', monospace !important;
color: var(--faye-text) !important;
}
[data-lumiverse-module="quick_toolbar"].lumiverse-quick-toolbar__context-value {
font-family: 'Pixelify Sans', monospace !important;
color: var(--faye-text-dim) !important;
}
[data-lumiverse-module="quick_toolbar"].lumiverse-quick-toolbar__context-card {
border-radius: 0 !important;
border: 1px solid var(--faye-indigo) !important;
background: var(--faye-panel) !important;
}
[data-lumiverse-module="quick_toolbar"].lumiverse-quick-toolbar__context-card::before {
border-radius: 0 !important;
border: 1px solid var(--faye-indigo) !important;
background: var(--faye-panel-dark) !important;
color: var(--faye-lavender) !important;
}
[data-lumiverse-module="quick_toolbar"].lumiverse-quick-toolbar__context-card:hover,
[data-lumiverse-module="quick_toolbar"].lumiverse-quick-toolbar__context-card:focus-visible {
border-color: var(--faye-periwinkle) !important;
background: var(--faye-panel-alt) !important;
}
[data-lumiverse-module="quick_toolbar"].lumiverse-quick-toolbar[data-variant="v1"] {
background: var(--faye-panel-dark) !important;
backdrop-filter: none !important;
border: 2px solid var(--faye-indigo) !important;
border-radius: 0 !important;
}
/* ===================== INPUT AREA ===================== */
[data-component="InputArea"] {
display: flex !important;
flex-direction: column !important;
background: var(--faye-bg) !important;
border-top: 3px solid var(--faye-indigo) !important;
border-radius: 0 !important;
}
/* top action row: home / regen / continue / persona / connections / tools / extras / customize-gear */
[data-component="InputArea"] [class*="actionBar" i] {
background: var(--faye-panel) !important;
border-bottom: 2px solid var(--faye-indigo) !important;
border-radius: 0 !important;
padding: 3px 8px !important;
display: flex !important;
align-items: center !important;
gap: 2px !important;
flex-wrap: wrap !important;
}
[data-component="InputArea"] [class*="actionBtn" i] {
background: transparent !important;
border: none !important;
border-radius: 0 !important;
color: var(--faye-text-dim) !important;
padding: 3px 6px !important;
}
[data-component="InputArea"] [class*="actionBtn" i]:hover,
[data-component="InputArea"] [class*="actionBtn" i][aria-expanded="true"] {
background: var(--faye-indigo) !important;
color: var(--faye-white) !important;
}
[data-component="InputArea"] [class*="actionBtn" i] svg { stroke: currentColor !important; }
[data-component="InputArea"] [class*="actionDivider" i] {
width: 1px !important;
height: 14px !important;
background: rgba(93,109,165,0.4) !important;
margin: 0 2px !important;
}
[data-component="InputArea"] [class*="badge" i] {
background: var(--faye-periwinkle) !important;
color: var(--faye-white) !important;
border-radius: 0 !important;
font-family: 'VT323', monospace !important;
font-size: 11px !important;
}
/* extension toolbar mount (empty right now, future-proofing) */
[data-component="InputArea"] [class*="extensionToolbar" i] {
background: var(--faye-panel-dark) !important;
border-bottom: 2px solid var(--faye-indigo) !important;
}
/* input row */
[data-component="InputArea"] [class*="inputRow" i] {
background: var(--faye-panel) !important;
border: 2px solid var(--faye-indigo) !important;
border-radius: 0 !important;
margin: 6px 8px !important;
display: flex !important;
align-items: flex-end !important;
}
[data-component="InputArea"] textarea {
background: transparent !important;
color: var(--faye-text) !important;
font-family: 'Pixelify Sans', monospace !important;
font-size: 14px !important;
border: none !important;
outline: none !important;
width: 100% !important;
}
[data-component="InputArea"] textarea::placeholder {
color: transparent !important;
-webkit-text-fill-color: transparent !important;
opacity: 0 !important;
}
/* native placeholder text can't be changed via CSS content, so hide
it (above) and overlay our own via :has() on the wrapper instead —
shows only while the textarea is actually empty */
[data-component="InputArea"] [class*="inputWrapper" i] {
position: relative !important;
}
[data-component="InputArea"] [class*="inputWrapper" i]:has(textarea:placeholder-shown)::before {
content: "> waiting for user input..." !important;
position: absolute !important;
top: 10px !important;
left: 10px !important;
color: var(--faye-periwinkle) !important;
font-family: 'VT323', monospace !important;
font-size: 14px !important;
pointer-events: none !important;
white-space: nowrap !important;
}
[data-component="InputArea"] button[class*="attach" i] {
background: transparent !important;
border: none !important;
border-radius: 0 !important;
color: var(--faye-text-dim) !important;
padding: 3px 6px !important;
}
[data-component="InputArea"] button[class*="attach" i]:hover {
background: var(--faye-indigo) !important;
color: var(--faye-white) !important;
}
[data-component="InputArea"] button[class*="send" i] {
background: var(--faye-indigo) !important;
border: 2px solid var(--faye-periwinkle) !important;
border-radius: 0 !important;
color: var(--faye-text) !important;
}
[data-component="InputArea"] button[class*="send" i]:hover {
background: var(--faye-periwinkle) !important;
color: var(--faye-white) !important;
}
/* mobile: grid the WHOLE InputArea this time, but — unlike last attempt —
every single direct child gets an explicit grid-area, so nothing is
left for the browser to auto-place. This is what lets ri-toolbar's
3 buttons (a separate sibling from inputRow) merge into the same
visual row as attach/mic: both inputRow AND ri-toolbar are flattened
with display:contents so their children share one grid. */
@media (max-width: 720px) {
[data-component="InputArea"] {
display: grid !important;
grid-template-columns: auto auto 1fr auto auto auto auto auto !important;
grid-template-areas:
"actionbar actionbar actionbar actionbar actionbar actionbar actionbar actionbar"
"exttoolbar exttoolbar exttoolbar exttoolbar exttoolbar exttoolbar exttoolbar exttoolbar"
"popover popover popover popover popover popover popover popover"
"ripanel ripanel ripanel ripanel ripanel ripanel ripanel ripanel"
"field field field field field field field send"
"attach mic . . ri div wfm tpl" !important;
gap: 4px 6px !important;
padding: 4px 6px !important;
}
[data-component="InputArea"] > [class*="actionBar" i] { grid-area: actionbar !important; }
[data-component="InputArea"] > [class*="extensionToolbar" i] { grid-area: exttoolbar !important; }
[data-component="InputArea"] > [class*="popoverSlot" i] { grid-area: popover !important; }
[data-component="InputArea"] > #ri-panel { grid-area: ripanel !important; }
/* flatten ri-toolbar and inputRow so their children join the same grid */
[data-component="InputArea"] > #ri-toolbar,
[data-component="InputArea"] [class*="inputRow" i] {
display: contents !important;
}
#ri-btn-ri { grid-area: ri !important; align-self: center !important; }
#ri-divider { grid-area: div !important; align-self: center !important; }
#ri-btn-wfm { grid-area: wfm !important; align-self: center !important; }
#ri-btn-tpl { grid-area: tpl !important; align-self: center !important; }
[data-component="InputArea"] button[aria-label="Attach file" i] {
grid-area: attach !important; align-self: center !important;
}
[data-component="InputArea"] button[aria-label*="speech-to-text" i] {
grid-area: mic !important; align-self: center !important;
}
[data-component="InputArea"] [class*="inputWrapper" i] {
grid-area: field !important;
width: auto !important;
margin: 0 !important;
}
[data-component="InputArea"] [class*="sendBtnShell" i] {
grid-area: send !important;
align-self: end !important;
}
/* empty spindle mount points inside inputRow — hide so they don't
land in an unassigned cell */
[data-component="InputArea"] [class*="inputToolsSlot" i] {
display: none !important;
}
}
/* mobile centering fix — turns out InputArea is a floating, absolutely
positioned dock (position:absolute; bottom/left/right), not a static
full-width bar, hence the skew. Values below are yours, confirmed
working on your device — just moved off the hashed classname so they
survive the next rebuild. */
@media (max-width: 600px) {
[data-component="InputArea"] {
bottom: 8px !important;
left: 1px !important;
right: 8px !important;
padding: 8px 8px 8px !important;
}
}
/* ===================== CHARACTER GALLERY + CHAT LIST — stable hooks ===================== */
[data-component="LandingPage"],
[data-component="HomepageCharacterLibrary"] {
background: var(--faye-bg) !important;
font-family: 'Pixelify Sans', monospace !important;
}
[data-component="LandingPage"] h1, [data-component="LandingPage"] h2,
[data-component="HomepageCharacterLibrary"] h1, [data-component="HomepageCharacterLibrary"] h2 {
font-family: 'VT323', monospace !important;
color: var(--faye-text) !important;
letter-spacing: 1px !important;
text-shadow: 1px 1px 0 rgba(52,73,121,0.4) !important;
}
[data-component="LandingPage"] input,
[data-component="HomepageCharacterLibrary"] input {
font-family: 'Pixelify Sans', monospace !important;
background: var(--faye-panel) !important;
color: var(--faye-text) !important;
border: 2px solid var(--faye-indigo) !important;
border-radius: 0 !important;
padding: 4px 10px !important;
}
[data-component="LandingPage"] input::placeholder,
[data-component="HomepageCharacterLibrary"] input::placeholder {
color: var(--faye-periwinkle) !important;
font-family: 'VT323', monospace !important;
}
/* Suite's characters-tab scope header (Mine/Shared toggle + badge) */
[data-lumiverse-module="character_library_scope"] { color: var(--faye-text) !important; }
[data-lumiverse-module="character_library_scope"] [data-lumiverse-scope-title] {
font-family: 'VT323', monospace !important;
letter-spacing: 0.5px !important;
}
[data-lumiverse-module="character_library_scope"] [data-lumiverse-scope-badge] {
background: var(--faye-panel-dark) !important;
border: 1px solid var(--faye-periwinkle) !important;
border-radius: 0 !important;
color: var(--faye-text-dim) !important;
font-family: 'VT323', monospace !important;
}
[data-lumiverse-module="character_library_scope"] [data-lumiverse-scope-facet] {
background: var(--faye-panel) !important;
border: 2px solid var(--faye-indigo) !important;
border-radius: 0 !important;
color: var(--faye-text) !important;
}
/* CHARACTER LIBRARY CARD — social-media profile style.
Real DOM: button[aria-label^="Preview "] > span[imageFrame] > img,
span[cardFooter] > span[cardName] + span[cardMeta].
Layout: status header / photo / @handle block / fake action row.
Hover + pressed states are set explicitly (incl. killing any native
::after overlay) so the stray pink hover tint can't leak through. */
button[aria-label^="Preview "] {
display: flex !important;
flex-direction: column !important;
background: var(--faye-panel-dark) !important;
background-image: none !important;
border: 1.6px solid var(--faye-border-soft) !important;
border-radius: 0 !important;
box-shadow: 3px 3px 0 rgba(200,202,238,0.8) !important;
overflow: hidden !important;
padding: 0 !important;
font-family: 'Pixelify Sans', monospace !important;
transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s !important;
}
button[aria-label^="Preview "]:hover,
button[aria-label^="Preview "]:focus-visible {
background: var(--faye-panel-dark) !important;
background-image: none !important;
border-color: var(--faye-lavender) !important;
box-shadow: 3px 3px 0 var(--faye-lavender) !important;
transform: translate(-1px, -1px) !important;
filter: none !important;
}
button[aria-label^="Preview "][aria-pressed="true"] {
background: var(--faye-panel-dark) !important;
border-color: var(--faye-text) !important;
box-shadow: 3px 3px 0 var(--faye-text) !important;
}
button[aria-label^="Preview "]::after,
button[aria-label^="Preview "] [class*="imageFrame" i]::before,
button[aria-label^="Preview "] [class*="imageFrame" i]::after {
display: none !important;
content: none !important;
}
/* status header — "online now" strip instead of a window title */
button[aria-label^="Preview "]::before {
content: "\25CF online now" !important;
display: block !important;
height: 20px !important;
line-height: 20px !important;
padding: 0 8px !important;
background: var(--faye-tb-char) !important;
color: var(--faye-white) !important;
font-family: 'VT323', monospace !important;
font-size: 13px !important;
letter-spacing: 0.5px !important;
text-align: left !important;
text-shadow: 1px 1px 0 rgba(52,73,121,0.4) !important;
border-bottom: 2px solid var(--faye-indigo) !important;
white-space: nowrap !important;
box-sizing: border-box !important;
}
/* the photo — "the post" */
button[aria-label^="Preview "] [class*="imageFrame" i] {
display: block !important;
border: none !important;
border-bottom: 1px solid var(--faye-border-soft) !important;
background: var(--faye-bg) !important;
}
button[aria-label^="Preview "] [class*="imageFrame" i] img {
display: block !important;
width: 100% !important;
object-fit: cover !important;
filter: none !important;
}
/* name + @handle block */
button[aria-label^="Preview "] [class*="cardFooter" i] {
background: var(--faye-panel-dark) !important;
background-image: none !important;
padding: 8px 10px 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 1px !important;
max-height: none !important;
flex: 1 1 auto !important;
text-align: left !important;
}
button[aria-label^="Preview "] [class*="cardName" i] {
font-family: 'VT323', monospace !important;
font-size: 17px !important;
color: var(--faye-white) !important;
letter-spacing: 0.5px !important;
background: none !important;
-webkit-text-fill-color: var(--faye-white) !important;
}
button[aria-label^="Preview "] [class*="cardMeta" i] {
font-family: 'Pixelify Sans', monospace !important;
font-size: 11px !important;
color: var(--faye-lavender) !important;
}
button[aria-label^="Preview "] [class*="cardMeta" i]::before {
content: "@" !important;
}
/* fake action row — like / message / add friend */
button[aria-label^="Preview "] [class*="cardFooter" i]::after {
content: "\2661 \2709 + add friend" !important;
display: block !important;
margin: auto -10px 0 !important;
padding: 6px 10px !important;
border-top: 1px dashed var(--faye-border-soft) !important;
color: var(--faye-periwinkle) !important;
font-family: 'VT323', monospace !important;
font-size: 13px !important;
letter-spacing: 0.5px !important;
white-space: pre !important;
}
button[aria-label^="Preview "]:hover [class*="cardFooter" i]::after {
color: var(--faye-text) !important;
}
/* list / row view — this is the "chat gallery" (chat + character list rows) */
[data-component="CharacterList"] { background: var(--faye-bg) !important; }
[data-component="CharacterRow"] {
background: var(--faye-panel) !important;
border: 2px solid var(--faye-indigo) !important;
border-radius: 0 !important;
box-shadow: 3px 3px 0 rgba(20,30,80,0.8) !important;
font-family: 'Pixelify Sans', monospace !important;
color: var(--faye-text) !important;
margin-bottom: 6px !important;
}
[data-component="CharacterRow"]:hover {
border-color: var(--faye-periwinkle) !important;
box-shadow: 3px 3px 0 rgba(93,109,165,0.6) !important;
background-color: var(--faye-panel-alt) !important;
}
[data-component="CharacterRow"][aria-selected="true"],
[data-component="CharacterRow"][aria-current="true"] {
background-color: var(--faye-panel-alt) !important;
border-color: var(--faye-lavender) !important;
}
[data-component="CharacterRow"] [class*="name" i],
[data-component="CharacterRow"] strong {
font-family: 'VT323', monospace !important;
color: var(--faye-text) !important;
font-size: 16px !important;
}
[data-component="CharacterRow"] [class*="time" i],
[data-component="CharacterRow"] [class*="date" i],
[data-component="CharacterRow"] [class*="meta" i] {
color: var(--faye-periwinkle) !important;
font-size: 12px !important;
}
[data-component="CharacterRow"] img {
border: 2px solid var(--faye-indigo) !important;
border-radius: 0 !important;
}
/* ===================== CHAT TOOLBAR (ChatView) ===================== */
/* the "_chatToolbar_" element belongs to [data-component="ChatView"] —
confirmed real via Theme Studio, not the old dead hash rule this
replaces, and not the same thing as InputArea's own actionBar. */
[data-component="ChatView"] [class*="chatToolbar" i] {
background: linear-gradient(135deg, var(--faye-periwinkle-light) 0%, var(--faye-violet) 100%) !important;
border: 1px solid var(--faye-border-soft) !important;
border-radius: 0 !important;
}
[data-component="ChatView"] [class*="chatToolbar" i] button {
background: transparent !important;
border: none !important;
border-radius: 0 !important;
color: var(--faye-white) !important;
}
[data-component="ChatView"] [class*="chatToolbar" i] button:hover {
background: rgba(255,255,255,0.15) !important;
}
/* ===================== CHARACTER PREVIEW PANEL — y2k webcore popup ad ===================== */
/* real DOM: aside._preview_li94x_39 > resizeHandle, previewControls
(pin/close), previewBody > previewImageFrame + previewMetadata
(imageHeightControl, previewHeader > h3/p/editBtn, previewSection
> h4 + lastChat), openChatBtn */
aside[class*="preview" i] {
background: repeating-linear-gradient(45deg, var(--faye-panel), var(--faye-panel) 10px, var(--faye-panel-dark) 10px, var(--faye-panel-dark) 20px) !important;
border: 4px solid var(--faye-lavender) !important;
border-radius: 0 !important;
box-shadow: 6px 6px 0 rgba(20,30,80,0.9), 0 0 0 2px var(--faye-indigo) !important;
font-family: 'Pixelify Sans', monospace !important;
overflow: hidden !important;
}
/* marquee-style title banner, since the panel has no title bar of its own */
aside[class*="preview" i]::before {
content: "HOT SINGLES IN YOUR AREA" !important;
display: block !important;
background: linear-gradient(90deg, var(--faye-pink), var(--faye-lavender), var(--faye-periwinkle), var(--faye-lavender), var(--faye-pink)) !important;
color: var(--faye-white) !important;
font-family: 'VT323', monospace !important;
font-size: 15px !important;
line-height: 1 !important;
letter-spacing: 1px !important;
text-align: left !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
padding: 8px 64px 8px 12px !important;
border-bottom: 3px solid var(--faye-indigo) !important;
text-shadow: 1px 1px 0 rgba(0,0,0,0.4) !important;
box-sizing: border-box !important;
}
aside[class*="preview" i] [class*="resizeHandle" i] {
background: repeating-linear-gradient(135deg, var(--faye-periwinkle), var(--faye-periwinkle) 3px, var(--faye-indigo) 3px, var(--faye-indigo) 6px) !important;
}
/* pin/close — chunky bevelled y2k square buttons, sitting BELOW the
banner strip now (banner is 22px + 3px border = 25px) instead of
floating on top of it at a fixed top:4px */
aside[class*="preview" i] [class*="previewControls" i] {
position: absolute !important;
top: 3px !important;
right: 3px !important;
display: flex !important;
gap: 4px !important;
z-index: 3 !important;
}
aside[class*="preview" i] [class*="previewControls" i] button {
width: 22px !important;
height: 22px !important;
min-width: 22px !important;
min-height: 22px !important;
padding: 0 !important;
background: var(--faye-lavender) !important;
background-color: var(--faye-lavender) !important;
border-top: 2px solid var(--faye-text-soft) !important;
border-left: 2px solid var(--faye-text-soft) !important;
border-right: 2px solid var(--faye-indigo) !important;
border-bottom: 2px solid var(--faye-indigo) !important;
border-radius: 0 !important;
color: var(--faye-panel-dark) !important;
box-shadow: 2px 2px 0 rgba(0,0,0,0.5) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
aside[class*="preview" i] [class*="previewControls" i] button svg {
stroke: var(--faye-panel-dark) !important;
}
aside[class*="preview" i] [class*="previewControls" i] button:hover {
background: var(--faye-pink) !important;
background-color: var(--faye-pink) !important;
}
aside[class*="preview" i] [class*="previewControls" i] button:active {
border-top-color: var(--faye-indigo) !important;
border-left-color: var(--faye-indigo) !important;
border-right-color: var(--faye-text-soft) !important;
border-bottom-color: var(--faye-text-soft) !important;
}
/* image — sticker/polaroid frame */
/* fixed standard pfp — same size for every character, regardless
of the Image H slider (which is hidden below since it's now moot) */
aside[class*="preview" i] [class*="previewImageFrame" i] {
width: 200px !important;
height: 260px !important;
max-width: 100% !important;
border: 3px solid var(--faye-white) !important;
margin: 14px auto !important;
box-shadow: 4px 4px 0 rgba(20,30,80,0.8) !important;
overflow: hidden !important;
}
aside[class*="preview" i] [class*="previewImageFrame" i] img {
display: block !important;
width: 100% !important;
height: 100% !important;
max-height: none !important;
object-fit: cover !important;
object-position: top center !important;
}
aside[class*="preview" i] [class*="previewMetadata" i] {
padding: 0 14px 76px !important;
}
aside[class*="preview" i] [class*="imageHeightControl" i] {
display: none !important;
font-family: 'VT323', monospace !important;
color: var(--faye-text-dim) !important;
font-size: 13px !important;
align-items: center !important;
gap: 6px !important;
margin-bottom: 10px !important;
}
/* minimalist — just a thin track and a thin line marker, no filled
block/border/shadow */
aside[class*="preview" i] [class*="imageHeightControl" i] input[type="range"] {
-webkit-appearance: none !important;
appearance: none !important;
width: 100% !important;
height: 1px !important;
background: rgba(255,255,255,0.3) !important;
border-radius: 0 !important;
outline: none !important;
margin: 0 !important;
}
aside[class*="preview" i] [class*="imageHeightControl" i] input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none !important;
width: 2px !important;
height: 18px !important;
background: var(--faye-white) !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
cursor: pointer !important;
}
aside[class*="preview" i] [class*="imageHeightControl" i] input[type="range"]::-moz-range-track {
background: rgba(255,255,255,0.3) !important;
height: 1px !important;
border-radius: 0 !important;
}
aside[class*="preview" i] [class*="imageHeightControl" i] input[type="range"]::-moz-range-thumb {
width: 2px !important;
height: 18px !important;
background: var(--faye-white) !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
cursor: pointer !important;
}
aside[class*="preview" i] [class*="imageHeightControl" i] input[type="range"]::-webkit-slider-thumb:hover {
box-shadow: 0 0 4px rgba(255,255,255,0.9) !important;
}
aside[class*="preview" i] [class*="imageHeightControl" i] input[type="range"]::-moz-range-thumb:hover {
box-shadow: 0 0 4px rgba(255,255,255,0.9) !important;
}
aside[class*="preview" i] [class*="previewHeader" i] {
justify-content: center !important;
text-align: center !important;
}
aside[class*="preview" i] [class*="previewHeader" i] h3 {
font-family: 'VT323', monospace !important;
font-size: 32px !important;
line-height: 1.1 !important;
text-align: center !important;
color: var(--faye-white) !important;
text-shadow: 2px 2px 0 var(--faye-pink), -1px -1px 0 var(--faye-periwinkle) !important;
letter-spacing: 0.5px !important;
margin: 0 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
max-width: 100% !important;
}
aside[class*="preview" i] [class*="previewHeader" i] > div:first-child {
width: 100% !important;
min-width: 0 !important;
}
aside[class*="preview" i] [class*="previewHeader" i] p {
font-family: 'Pixelify Sans', monospace !important;
color: var(--faye-lavender) !important;
font-size: 12px !important;
text-align: center !important;
margin: 4px 0 10px !important;
}
/* Edit — a second floating widget, stacked directly above the
"Open in chat" bubble. Same icon-only / hover-reveals-label
pattern, ghost-outline style so it reads as the secondary action. */
aside[class*="preview" i] [class*="editBtn" i] {
position: absolute !important;
bottom: 18px !important;
right: 14px !important;
width: auto !important;
display: flex !important;
align-items: center !important;
gap: 6px !important;
background: var(--faye-panel) !important;
border: 3px solid var(--faye-lavender) !important;
border-radius: 999px !important;
box-shadow: 3px 3px 0 rgba(20,30,80,0.9) !important;
color: transparent !important;
font-size: 0 !important;
padding: 10px !important;
overflow: hidden !important;
z-index: 5 !important;
}
aside[class*="preview" i] [class*="editBtn" i] svg {
color: var(--faye-lavender) !important;
width: 16px !important;
height: 16px !important;
flex-shrink: 0 !important;
}
/* icon-only — no hover label, since it's right-anchored and would
grow leftward into the chat pill. Native title="Edit character"
still gives a tooltip. */
aside[class*="preview" i] [class*="editBtn" i]::after {
content: none !important;
display: none !important;
}
aside[class*="preview" i] [class*="editBtn" i]:hover {
border-color: var(--faye-pink) !important;
}
aside[class*="preview" i] [class*="editBtn" i]:hover svg {
color: var(--faye-pink) !important;
}
/* "last chat" — old guestbook-entry look, dashed border */
/* previewSection now just a loose wrapper — the label sits above,
the actual message becomes the speech bubble (below) */
aside[class*="preview" i] [class*="previewSection" i] {
background: transparent !important;
border: none !important;
padding: 0 !important;
margin-top: 6px !important;
}
aside[class*="preview" i] [class*="previewSection" i] h4 {
font-family: 'VT323', monospace !important;
color: var(--faye-pink) !important;
font-size: 14px !important;
display: flex !important;
align-items: center !important;
gap: 4px !important;
margin: 0 0 6px !important;
}
/* the speech bubble itself */
aside[class*="preview" i] [class*="lastChat" i] {
position: relative !important;
background: var(--faye-panel-dark) !important;
border: 2px solid var(--faye-periwinkle) !important;
border-radius: 14px !important;
padding: 12px 16px !important;
margin-bottom: 14px !important;
min-height: 120px !important;
}
aside[class*="preview" i] [class*="lastChat" i]::after {
content: '' !important;
position: absolute !important;
bottom: -8px !important;
left: 18px !important;
width: 0 !important;
height: 0 !important;
border-left: 8px solid transparent !important;
border-right: 8px solid transparent !important;
border-top: 8px solid var(--faye-panel-dark) !important;
}
aside[class*="preview" i] [class*="lastChat" i] strong {
font-family: 'VT323', monospace !important;
color: var(--faye-text) !important;
font-size: 13px !important;
}
aside[class*="preview" i] [class*="lastChat" i] p {
font-family: 'Pixelify Sans', monospace !important;
color: var(--faye-text-dim) !important;
font-size: 12px !important;
line-height: 1.5 !important;
margin: 6px 0 0 !important;
white-space: normal !important;
max-height: none !important;
overflow: hidden !important;
display: -webkit-box !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 7 !important;
line-clamp: 7 !important;
}
/* Open in chat — floating "contact support" style widget bubble,
bottom-right of the panel. Icon-only by default (native text
hidden via font-size:0, since it's a bare text node we can't
target directly), label revealed on hover via max-width trick. */
aside[class*="preview" i] [class*="openChatBtn" i] {
position: absolute !important;
bottom: 14px !important;
left: 14px !important;
right: 72px !important;
margin: 0 !important;
width: auto !important;
justify-content: center !important;
display: flex !important;
align-items: center !important;
gap: 6px !important;
background: linear-gradient(135deg, var(--faye-lavender), var(--faye-periwinkle)) !important;
border: 3px solid var(--faye-white) !important;
border-radius: 999px !important;
box-shadow: 3px 3px 0 rgba(20,30,80,0.9), 0 0 12px rgba(152,150,187,0.6) !important;
color: transparent !important;
font-size: 0 !important;
padding: 12px !important;
overflow: hidden !important;
z-index: 5 !important;
}
aside[class*="preview" i] [class*="openChatBtn" i] svg {
color: var(--faye-white) !important;
width: 20px !important;
height: 20px !important;
flex-shrink: 0 !important;
}
aside[class*="preview" i] [class*="openChatBtn" i]::after {
content: "Chat!" !important;
font-size: 13px !important;
font-family: 'VT323', monospace !important;
color: var(--faye-white) !important;
letter-spacing: 0.5px !important;
white-space: nowrap !important;
max-width: 0 !important;
overflow: hidden !important;
transition: max-width 0.25s ease !important;
}
aside[class*="preview" i] [class*="openChatBtn" i]:hover::after {
max-width: 100px !important;
}
aside[class*="preview" i] [class*="openChatBtn" i]:hover {
background: linear-gradient(135deg, var(--faye-lavender), var(--faye-pink)) !important;
}
/* --- preview panel: mobile-safety rules (apply everywhere, harmless on desktop) --- */
/* mobile-only decorative backdrop (copies of the page background +
glows) that sat on top of the banner and the striped fill */
aside[class*="preview" i] > [class*="previewBackdrop" i] {
display: none !important;
}
/* keep the inner wrappers unpositioned, so the floating edit bubble
always anchors to the panel's bottom edge, not to a scrolling
inner block (on mobile it was riding along mid-card) */
aside[class*="preview" i] [class*="previewBody" i],
aside[class*="preview" i] [class*="previewMetadata" i],
aside[class*="preview" i] [class*="previewHeader" i],
aside[class*="preview" i] [class*="previewHeader" i] > div {
position: static !important;
}
/* slightly bigger pin/close on touch screens, still square and bevelled */
@media (max-width: 720px) {
aside[class*="preview" i] [class*="previewControls" i] button {
width: 28px !important;
height: 28px !important;
min-width: 28px !important;
min-height: 28px !important;
}
aside[class*="preview" i]::before {
padding-right: 76px !important;
}
}
/* ===================== HOMEPAGE — F.A.Y.E. OS desktop =====================
real DOM (Lumiverse core): .container[LandingPage] > .content[LandingPageCharacters]
(flex column) > header[LandingPageHeader] + .landingToolbar[LandingPageTabs] + main[LandingPageMain].
Layout: pixel-sky wallpaper > "F.A.Y.E. OS" header > one row of 5 desktop apps
(fayegram, messenger, temp chat, guides, log out) > the open app window.
The 3 header buttons are pulled into the app row with absolute positioning from
shared size variables (--app-w / --app-gap / --faye-hdr-h), so keep those in sync. */
/* wallpaper (assets/wallpaper.png is a 256x144 pixel-art sky, scaled crisp) */
html:has([data-component="LandingPage"]),
html:has([data-component="LandingPage"]) body {
background: url(assets/wallpaper.png) center bottom / cover no-repeat fixed, var(--faye-bg) !important;
image-rendering: pixelated;
overflow-x: hidden !important;
}
[data-component="LandingPage"] {
--app-w: 86px;
--app-gap: 6px;
--app-icon: 52px;
--app-label: 13px;
--faye-hdr-h: 140px;
--app-n: 5; /* number of apps in the row */
--app-center: 0px;
--app-first: 2; /* column of the first header app; 0 when the suite's tabs are absent */
box-sizing: border-box !important;
position: relative !important;
width: 100% !important;
min-width: 0 !important;
max-width: min(1460px, 100vw) !important;
margin-inline: auto !important;
padding: 8px clamp(8px, 2.5vw, 40px) 28px !important;
overflow-x: clip !important;
background: transparent !important;
}
[data-component="LandingPage"]:not(:has([role="tablist"])) { --app-first: 0; --app-n: 3; }
@media (max-width: 760px) {
[data-component="LandingPage"] {
--app-w: 62px;
--app-gap: 4px;
--app-icon: 40px;
--app-label: 11px;
--faye-hdr-h: 116px;
/* phones: centre the row of apps */
--app-center: calc((100% - var(--app-n) * var(--app-w) - (var(--app-n) - 1) * var(--app-gap)) / 2);
padding-inline: 8px !important;
}
}
/* content column: no side padding so the app row lines up with the window */
[data-component="LandingPageCharacters"] {
box-sizing: border-box !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
margin-inline: 0 !important;
padding: 20px 0 0 !important;
}
/* ---- header = "F.A.Y.E. OS" masthead ---- */
[data-component="LandingPageHeader"] {
display: block !important;
position: static !important;
box-sizing: border-box !important;
height: var(--faye-hdr-h) !important;
margin: 0 0 14px !important;
padding: 0 !important;
background: none !important;
border: none !important;
border-bottom: 2px dashed var(--faye-lavender) !important;
border-radius: 0 !important;
box-shadow: none !important;
}
[data-component="LandingPageHeader"]::before { content: none !important; display: none !important; }
[data-component="LandingPageHeader"]::after {
content: "\2605 \2726 \2605";
position: absolute;
top: 34px; right: 4px;
color: var(--faye-pink);
font-family: 'VT323', monospace;
font-size: 22px;
letter-spacing: 6px;
text-shadow: 2px 2px 0 var(--faye-indigo);
pointer-events: none;
}
[data-component="LandingPageHeader"] [class*="_logo_"] {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: center !important;
gap: 0 !important;
height: 100% !important;
}
[data-component="LandingPageHeader"] [class*="_logoIcon_"] { display: none !important; }
[data-component="LandingPageHeader"] [class*="_logoText_"] {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 2px !important;
}
[data-component="LandingPageHeader"] [class*="_logoText_"] h1 {
margin: 0 !important;
font-size: 0 !important;
line-height: 1 !important;
}
[data-component="LandingPageHeader"] [class*="_logoText_"] h1::after {
content: "F.A.Y.E. OS";
display: block;
font-family: 'Pixelify Sans', monospace;
font-weight: 700;
font-size: clamp(38px, 8vw, 68px);
line-height: 1;
letter-spacing: 2px;
color: var(--faye-text);
text-shadow: 3px 3px 0 var(--faye-pink), 6px 6px 0 var(--faye-indigo);
}
[data-component="LandingPageHeader"] [class*="_taglineBtn_"] {
margin-top: 8px !important;
color: var(--faye-text-dim) !important;
font-family: 'VT323', monospace !important;
font-size: 20px !important;
letter-spacing: 1px !important;
}
@media (max-width: 760px) {
[data-component="LandingPageHeader"] [class*="_logoText_"] h1::after {
font-size: 40px;
text-shadow: 2px 2px 0 var(--faye-pink), 4px 4px 0 var(--faye-indigo);
}
[data-component="LandingPageHeader"] [class*="_taglineBtn_"] { font-size: 17px !important; margin-top: 4px !important; }
[data-component="LandingPageHeader"]::after { top: 28px; font-size: 18px; letter-spacing: 3px; }
}
/* ---- header buttons become desktop apps in the same row as fayegram / messenger ---- */
[data-component="LandingPageHeader"] [class*="_headerActions_"] { display: contents !important; }
[data-component="LandingPageHeader"] button[title="Enable motion parallax"] { display: none !important; }
[data-component="LandingPageHeader"] [class*="_tempChatWrap_"],
[data-component="LandingPageHeader"] [class*="_headerActions_"] > button {
position: absolute !important;
top: calc(20px + var(--faye-hdr-h) + 14px) !important;
width: var(--app-w) !important;
margin: 0 !important;
}
[data-component="LandingPageHeader"] [class*="_tempChatWrap_"] { left: calc(var(--app-center) + var(--app-first) * (var(--app-w) + var(--app-gap))) !important; }
[data-component="LandingPageHeader"] [class*="_headerActions_"] > button[aria-label="Open Lumiverse guides"] { left: calc(var(--app-center) + (var(--app-first) + 1) * (var(--app-w) + var(--app-gap))) !important; }
[data-component="LandingPageHeader"] [class*="_headerActions_"] > button:last-child { left: calc(var(--app-center) + (var(--app-first) + 2) * (var(--app-w) + var(--app-gap))) !important; }
[data-component="LandingPageHeader"] [class*="_accountBtn_"] {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 4px !important;
width: var(--app-w) !important;
min-width: 0 !important;
padding: 6px 4px !important;
background: none !important;
border: 2px dotted transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
color: var(--faye-white) !important;
font-size: 0 !important;
}
[data-component="LandingPageHeader"] [class*="_accountBtn_"] > * { display: none !important; }
[data-component="LandingPageHeader"] [class*="_accountBtn_"]::before {
content: "";
display: block;
width: var(--app-icon); height: var(--app-icon);
background: center / contain no-repeat;
filter: drop-shadow(3px 3px 0 rgba(20,30,80,0.85));
}
[data-component="LandingPageHeader"] [class*="_accountBtn_"]::after {
display: block;
padding: 0 4px;
font-family: 'Pixelify Sans', monospace;
font-size: var(--app-label);
line-height: 1.3;
color: var(--faye-white);
text-shadow: 1px 1px 0 var(--faye-bg), -1px -1px 0 var(--faye-bg), 1px -1px 0 var(--faye-bg), -1px 1px 0 var(--faye-bg);
}
[data-component="LandingPageHeader"] [class*="_tempChatWrap_"] > [class*="_accountBtn_"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15' shape-rendering='crispEdges'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%238fd6c8'/%3E%3Cstop offset='1' stop-color='%235d6da5'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='0.5' y='0.5' width='14' height='14' rx='3' fill='url(%23g)' stroke='%23344979'/%3E%3Cg fill='%23fff'%3E%3Crect x='6' y='2' width='3' height='4'/%3E%3Cpath d='M6 6h3l3 6h-9z'/%3E%3C/g%3E%3Cg fill='%238fd6c8'%3E%3Crect x='6' y='10' width='1' height='1'/%3E%3Crect x='8' y='9' width='1' height='1'/%3E%3C/g%3E%3C/svg%3E"); }
[data-component="LandingPageHeader"] [class*="_tempChatWrap_"] > [class*="_accountBtn_"]::after { content: "Temp Chat"; }
[data-component="LandingPageHeader"] button[aria-label="Open Lumiverse guides"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15' shape-rendering='crispEdges'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23a58bd8'/%3E%3Cstop offset='1' stop-color='%23e08aa0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='0.5' y='0.5' width='14' height='14' rx='3' fill='url(%23g)' stroke='%23344979'/%3E%3Cg fill='%23fff'%3E%3Crect x='3' y='3' width='4' height='9'/%3E%3Crect x='8' y='3' width='4' height='9'/%3E%3C/g%3E%3Cg fill='%23e08aa0'%3E%3Crect x='4' y='5' width='2' height='1'/%3E%3Crect x='4' y='7' width='2' height='1'/%3E%3Crect x='9' y='5' width='2' height='1'/%3E%3Crect x='9' y='7' width='2' height='1'/%3E%3C/g%3E%3C/svg%3E"); }
[data-component="LandingPageHeader"] button[aria-label="Open Lumiverse guides"]::after { content: "Guides"; }
[data-component="LandingPageHeader"] [class*="_headerActions_"] > button:last-child::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15' shape-rendering='crispEdges'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%237e83ce'/%3E%3Cstop offset='1' stop-color='%23344979'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='0.5' y='0.5' width='14' height='14' rx='3' fill='url(%23g)' stroke='%231c1d30'/%3E%3Cg fill='%23fff'%3E%3Crect x='6' y='3' width='3' height='3'/%3E%3Cpath d='M4 12v-2h1v-1h5v1h1v2z'/%3E%3C/g%3E%3C/svg%3E"); }
[data-component="LandingPageHeader"] [class*="_headerActions_"] > button:last-child::after { content: "Log out"; }
[data-component="LandingPageHeader"] [class*="_accountBtn_"]:hover {
background: rgba(93,109,165,0.22) !important;
border-color: var(--faye-text-dim) !important;
}
[data-component="LandingPageHeader"] [class*="_accountBtn_"]:active { border-color: var(--faye-text) !important; }
/* temp-chat dropdown */
[data-component="LandingPageHeader"] [class*="_tempChatMenu_"] {
z-index: 40 !important;
background: var(--faye-panel) !important;
border: 2px solid var(--faye-indigo) !important;
border-radius: 0 !important;
box-shadow: 4px 4px 0 rgba(20,30,80,0.8) !important;
}
[data-component="LandingPageHeader"] [class*="_tempChatMenuItem_"] {
border-radius: 0 !important;
color: var(--faye-text) !important;
font-family: 'Pixelify Sans', monospace !important;
}
[data-component="LandingPageHeader"] [class*="_tempChatMenuItem_"]:hover { background: var(--faye-indigo) !important; }
/* wordmark on top; quote left, "Continue your story" right (stacked and left-aligned on phones) */
[data-component="LandingPageHeader"] [class*="_logo_"] { width: 100% !important; align-items: stretch !important; }
[data-component="LandingPageHeader"] [class*="_logoText_"] {
display: grid !important;
grid-template-columns: 1fr auto !important;
grid-template-areas: "mark mark" "quote tag" !important;
align-items: end !important;
width: 100% !important;
gap: 4px 12px !important;
}
[data-component="LandingPageHeader"] [class*="_logoText_"] h1 { grid-area: mark !important; }
[data-component="LandingPageHeader"] [class*="_logoText_"]::after {
grid-area: quote;
content: "\201Csic mundus creatus est,\201D";
color: var(--faye-lavender);
font-family: 'VT323', monospace;
font-style: italic;
font-size: 22px;
letter-spacing: 2px;
line-height: 1.1;
text-shadow: 2px 2px 0 var(--faye-indigo);
}
[data-component="LandingPageHeader"] [class*="_taglineBtn_"] { grid-area: tag !important; justify-self: end !important; margin: 0 !important; text-align: right !important; }
@media (max-width: 760px) {
[data-component="LandingPageHeader"] [class*="_logoText_"] { grid-template-columns: 1fr !important; grid-template-areas: "mark" "quote" "tag" !important; gap: 2px !important; }
[data-component="LandingPageHeader"] [class*="_logoText_"]::after { font-size: 16px; letter-spacing: 1px; }
[data-component="LandingPageHeader"] [class*="_taglineBtn_"] { justify-self: start !important; text-align: left !important; }
}
/* ---- desktop app icons: tabs ----
real DOM: [data-component=LandingPageTabs] (the toolbar) > div[role=tablist] > button[role=tab][data-landing-tab=characters|chats]
(inline-styled by the host, hence the !importants). Other toolbar buttons are NOT tabs. */
[data-component="LandingPageTabs"] {
display: flex !important;
flex-wrap: wrap !important;
align-items: flex-start !important;
gap: 10px 14px !important;
min-height: calc(var(--app-icon) + var(--app-label) * 1.3 + 30px) !important;
padding: 0 !important;
margin-bottom: 12px !important;
background: none !important;
border: none !important;
box-shadow: none !important;
}
[data-component="LandingPageTabs"] [role="tablist"] {
margin-left: var(--app-center) !important;
display: flex !important;
flex-wrap: wrap !important;
gap: var(--app-gap) !important;
padding: 0 !important;
background: none !important;
border: none !important;
}
[data-component="LandingPageTabs"] button[role="tab"] {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 4px !important;
width: var(--app-w) !important;
min-width: 0 !important;
padding: 6px 4px !important;
background: none !important;
border: 2px dotted transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
color: var(--faye-white) !important;
font-size: 0 !important;
}
[data-component="LandingPageTabs"] button[role="tab"] > * { display: none !important; }
[data-component="LandingPageTabs"] button[role="tab"]::before {
content: "";
display: block;
width: var(--app-icon); height: var(--app-icon);
background: center / contain no-repeat;
filter: drop-shadow(3px 3px 0 rgba(20,30,80,0.85));
}
[data-component="LandingPageTabs"] button[data-landing-tab="characters"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15' shape-rendering='crispEdges'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23e08aa0'/%3E%3Cstop offset='1' stop-color='%23a58bd8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='0.5' y='0.5' width='14' height='14' rx='3' fill='url(%23g)' stroke='%23344979'/%3E%3Cg fill='%23fff'%3E%3Crect x='4' y='4' width='2' height='1'/%3E%3Crect x='8' y='4' width='2' height='1'/%3E%3Crect x='3' y='5' width='8' height='3'/%3E%3Crect x='4' y='8' width='6' height='1'/%3E%3Crect x='5' y='9' width='4' height='1'/%3E%3Crect x='6' y='10' width='2' height='1'/%3E%3C/g%3E%3Crect x='2' y='2' width='1' height='1' fill='%23fff' opacity='.7'/%3E%3C/svg%3E"); }
[data-component="LandingPageTabs"] button[data-landing-tab="chats"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15' shape-rendering='crispEdges'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%237e83ce'/%3E%3Cstop offset='1' stop-color='%23344979'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='0.5' y='0.5' width='14' height='14' rx='3' fill='url(%23g)' stroke='%231c1d30'/%3E%3Cpath fill='%23fff' d='M4 3h7v1h1v4h-1v1h-4l-2 2v-2h-1v-1h-1v-4h1z'/%3E%3Cg fill='%235d6da5'%3E%3Crect x='5' y='5' width='1' height='1'/%3E%3Crect x='7' y='5' width='1' height='1'/%3E%3Crect x='9' y='5' width='1' height='1'/%3E%3C/g%3E%3C/svg%3E"); }
[data-component="LandingPageTabs"] button[role="tab"]::after {
display: block;
padding: 0 4px;
font-family: 'Pixelify Sans', monospace;
font-size: var(--app-label);
line-height: 1.3;
color: var(--faye-white);
text-shadow: 1px 1px 0 var(--faye-bg), -1px -1px 0 var(--faye-bg), 1px -1px 0 var(--faye-bg), -1px 1px 0 var(--faye-bg);
}
[data-component="LandingPageTabs"] button[data-landing-tab="characters"]::after { content: "Fayegram"; }
[data-component="LandingPageTabs"] button[data-landing-tab="chats"]::after { content: "Messenger"; }
[data-component="LandingPageTabs"] button[role="tab"]:hover {
background: rgba(93,109,165,0.22) !important;
border-color: var(--faye-text-dim) !important;
}
[data-component="LandingPageTabs"] button[role="tab"][aria-selected="true"] {
background: rgba(93,109,165,0.38) !important;
border-color: var(--faye-text) !important;
}
[data-component="LandingPageTabs"] button[role="tab"][aria-selected="true"]::after {
background: var(--faye-indigo);
text-shadow: none;
}
/* messenger toolbar: flat underline search + flat icon buttons (same language as the fayegram controls) */
[data-component="LandingPageTabs"] [class*="landingSearch"] {
box-sizing: border-box !important;
min-width: 0 !important;
flex: 1 1 220px !important;
max-width: 420px !important;
height: 32px !important;
margin-top: 10px !important;
margin-left: calc(3 * (var(--app-w) + var(--app-gap))) !important;
padding: 0 4px !important;
background: none !important;
border: none !important;
border-bottom: 2px solid var(--faye-periwinkle-light) !important;
border-radius: 0 !important;
box-shadow: none !important;
color: var(--faye-periwinkle-light) !important;
}
[data-component="LandingPageTabs"] [class*="landingSearch"]:focus-within { border-bottom-color: var(--faye-pink) !important; }
[data-component="LandingPageTabs"] [class*="landingSearch"] svg { color: var(--faye-periwinkle-light) !important; stroke: currentColor !important; }
[data-component="LandingPageTabs"] [class*="landingSearch"] input {
background: transparent !important;
border: none !important;
border-radius: 0 !important;
padding: 0 !important;
color: var(--faye-periwinkle-light) !important;
font-family: 'VT323', monospace !important;
font-size: 18px !important;
letter-spacing: 0.5px !important;
}
[data-component="LandingPageTabs"] [class*="landingSearch"] input::placeholder { color: var(--faye-periwinkle-light) !important; opacity: 0.85 !important; font-family: 'VT323', monospace !important; font-size: 18px !important; }
[data-component="LandingPageTabs"] button:not([role="tab"]) {
box-sizing: border-box !important;
width: 32px !important; height: 32px !important; min-width: 0 !important;
margin-top: 10px !important;
padding: 0 !important;
display: inline-flex !important; align-items: center !important; justify-content: center !important;
background: none !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
color: var(--faye-periwinkle-light) !important;
}
[data-component="LandingPageTabs"] button:not([role="tab"]) svg { width: 18px !important; height: 18px !important; color: inherit !important; stroke: currentColor !important; }
[data-component="LandingPageTabs"] button:not([role="tab"]):hover { background: none !important; color: var(--faye-white) !important; }
[data-component="LandingPageTabs"] button:not([role="tab"])[aria-pressed="true"],
[data-component="LandingPageTabs"] button:not([role="tab"])[aria-expanded="true"] { color: var(--faye-pink) !important; }
/* ---- app windows (the open tab) ----
LandingPageMain holds either the chats grid or the characters library.
title bar + controls are absolute pseudo-elements, so layout is untouched */
[data-component="LandingPageMain"] {
position: relative !important;
box-sizing: border-box !important;
margin-top: 6px !important;
padding: 36px 12px 12px !important;
background: rgba(14,17,32,0.94) !important;
border: 3px solid var(--faye-periwinkle-light) !important;
border-radius: 0 !important;
box-shadow: 5px 5px 0 rgba(10,13,28,0.8) !important;
}
[data-component="LandingPageMain"]::before {
content: "\2665 Fayegram";
position: absolute; top: 0; left: 0; right: 0;
height: 24px;
background: linear-gradient(to right, var(--faye-periwinkle), var(--faye-lavender) 60%, var(--faye-pink));
border-bottom: 2px solid var(--faye-periwinkle-light);
color: var(--faye-white);
font-family: 'Pixelify Sans', monospace;
font-size: 14px;
line-height: 24px;
padding: 0 90px 0 10px;
overflow: hidden;
white-space: nowrap;
text-shadow: 1px 1px 0 rgba(52,73,121,0.5);
pointer-events: none;
}
/* characters panel hidden => messenger is the open app (also covers suite-off) */
[data-component="LandingPageMain"]:has(> [data-component="LandingPageCharacterPanel"][hidden])::before {
content: "\2709 Messenger";
background: var(--faye-tb-pink);
}
[data-component="LandingPageMain"]::after {
content: "";
position: absolute; top: 3px; right: 5px;
width: 66px; height: 18px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 66 18' width='66' height='18' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='20' height='18' fill='%239896bb'/%3E%3Crect x='0' y='0' width='20' height='1' fill='%23e8e9fb'/%3E%3Crect x='0' y='0' width='1' height='18' fill='%23e8e9fb'/%3E%3Crect x='0' y='17' width='20' height='1' fill='%23344979'/%3E%3Crect x='19' y='0' width='1' height='18' fill='%23344979'/%3E%3Crect x='6' y='12' width='8' height='2' fill='%230e1120'/%3E%3Crect x='23' y='0' width='20' height='18' fill='%239896bb'/%3E%3Crect x='23' y='0' width='20' height='1' fill='%23e8e9fb'/%3E%3Crect x='23' y='0' width='1' height='18' fill='%23e8e9fb'/%3E%3Crect x='23' y='17' width='20' height='1' fill='%23344979'/%3E%3Crect x='42' y='0' width='1' height='18' fill='%23344979'/%3E%3Cg fill='%230e1120'%3E%3Crect x='29' y='4' width='9' height='2'/%3E%3Crect x='29' y='11' width='9' height='2'/%3E%3Crect x='29' y='4' width='2' height='9'/%3E%3Crect x='36' y='4' width='2' height='9'/%3E%3C/g%3E%3Crect x='46' y='0' width='20' height='18' fill='%239896bb'/%3E%3Crect x='46' y='0' width='20' height='1' fill='%23e8e9fb'/%3E%3Crect x='46' y='0' width='1' height='18' fill='%23e8e9fb'/%3E%3Crect x='46' y='17' width='20' height='1' fill='%23344979'/%3E%3Crect x='65' y='0' width='1' height='18' fill='%23344979'/%3E%3Cpath d='M52 4L60 13M60 4L52 13' stroke='%230e1120' stroke-width='2' fill='none'/%3E%3C/svg%3E") no-repeat;
pointer-events: none;
}
/* ---- fayegram: characters as a social platform ---- */
/* the library root (and the suite's wrapper section) must stay inside the window:
no breakout margins / widths / transforms from the host or the suite */
[data-component="LandingPageCharacters"],
[data-component="HomepageCharacterLibrary"],
section[data-homepage-character-library-root],
[data-lumiverse-module="homepage_library"] {
box-sizing: border-box !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
margin-inline: 0 !important;
left: auto !important;
right: auto !important;
transform: none !important;
}
[data-component="HomepageCharacterLibrary"] {
background: none !important;
border: none !important;
box-shadow: none !important;
}
[data-component="HomepageCharacterLibrary"]::before { content: none !important; display: none !important; }
/* wordmark replaces the "Character Library" heading + subtitle */
[data-component="HomepageCharacterLibrary"] h2 { font-size: 0 !important; line-height: 1 !important; }
[data-component="HomepageCharacterLibrary"] h2::before { content: none !important; }
[data-component="HomepageCharacterLibrary"] h2::after {
content: "Fayegram";
font-family: 'Pixelify Sans', monospace;
font-weight: 700;
font-size: 30px;
letter-spacing: 0;
background: linear-gradient(90deg, var(--faye-pink), var(--faye-purple) 55%, var(--faye-periwinkle-light));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
text-shadow: none;
}
[data-component="HomepageCharacterLibrary"] h2 + p { display: none !important; }
/* controls: flat, text-only, bigger type. one style for filters, selects, sort, search, settings */
[data-component="HomepageCharacterLibrary"] [class*="_filter_"],
[data-component="HomepageCharacterLibrary"] [class*="_filterActive_"],
[data-component="HomepageCharacterLibrary"] select,
[data-component="HomepageCharacterLibrary"] [class*="controls"] > button,
[data-component="HomepageCharacterLibrary"] [class*="settingsBtn"],
[data-component="HomepageCharacterLibrary"] [class*="searchField"] {
box-sizing: border-box !important;
height: 32px !important;
min-height: 0 !important;
background: none !important;
border: none !important;
border-bottom: 3px solid transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
color: var(--faye-text-dim) !important;
font-family: 'VT323', monospace !important;
font-size: 17px !important;
line-height: 1 !important;
letter-spacing: 1px !important;
text-transform: uppercase !important;
text-shadow: none !important;
filter: none !important;
}
[data-component="HomepageCharacterLibrary"] [class*="_filter_"],
[data-component="HomepageCharacterLibrary"] [class*="_filterActive_"],
[data-component="HomepageCharacterLibrary"] [class*="controls"] > button {
display: inline-flex !important;
align-items: center !important;
padding: 0 9px !important;
}
[data-component="HomepageCharacterLibrary"] [class*="_filter_"]:hover,
[data-component="HomepageCharacterLibrary"] [class*="controls"] > button:hover,
[data-component="HomepageCharacterLibrary"] select:hover,
[data-component="HomepageCharacterLibrary"] [class*="settingsBtn"]:hover {
background: none !important;
color: var(--faye-white) !important;
}
[data-component="HomepageCharacterLibrary"] [class*="_filterActive_"] {
background: none !important;
color: var(--faye-white) !important;
border-bottom-color: var(--faye-pink) !important;
}
/* selects: same flat text, just a caret */
[data-component="HomepageCharacterLibrary"] select {
appearance: none !important;
-webkit-appearance: none !important;
padding: 0 24px 0 9px !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' shape-rendering='crispEdges'%3E%3Cpath fill='%23c8caee' d='M0 0h2v1h1v1h1v1h2V2h1V1h1V0h2v1h-1v1h-1v1h-1v1h-1v1H4V5H3V4H2V3H1V2H0z'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 8px center !important;
background-size: 10px 6px !important;
cursor: pointer;
}
[data-component="HomepageCharacterLibrary"] select option { background: var(--faye-panel); color: var(--faye-text); font-family: 'VT323', monospace; }
/* search: icon + underline only */
[data-component="HomepageCharacterLibrary"] [class*="searchField"] {
max-width: 100% !important;
padding: 0 4px !important;
border-bottom: 2px solid var(--faye-periwinkle-light) !important;
color: var(--faye-periwinkle-light) !important;
}
[data-component="HomepageCharacterLibrary"] [class*="searchField"] svg { color: var(--faye-periwinkle-light) !important; stroke: currentColor !important; }
[data-component="HomepageCharacterLibrary"] [class*="searchField"] input::placeholder { color: var(--faye-periwinkle-light) !important; opacity: 0.85 !important; }
[data-component="HomepageCharacterLibrary"] [class*="searchField"]:focus-within { border-bottom-color: var(--faye-pink) !important; }
[data-component="HomepageCharacterLibrary"] [class*="searchField"] input {
background: none !important;
border: none !important;
border-radius: 0 !important;
padding: 0 !important;
height: 100% !important;
color: var(--faye-periwinkle-light) !important;
font: inherit !important;
text-transform: none !important;
letter-spacing: 0.5px !important;
}
/* Settings = centred icon only */
[data-component="HomepageCharacterLibrary"] [class*="settingsBtn"] {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 0 !important;
width: 32px !important;
min-width: 32px !important;
padding: 0 !important;
font-size: 0 !important;
}
[data-component="HomepageCharacterLibrary"] [class*="settingsBtn"] > * { margin: 0 !important; padding: 0 !important; }
[data-component="HomepageCharacterLibrary"] [class*="settingsBtn"] > :nth-child(n+2) { display: none !important; }
[data-component="HomepageCharacterLibrary"] [class*="settingsBtn"] svg {
display: block !important;
width: 19px !important;
height: 19px !important;
margin: 0 !important;
}
/* character cards = feed posts */
button[aria-label^="Preview "] {
display: grid !important;
grid-template-columns: 46px minmax(0, 1fr) !important;
grid-template-rows: auto auto auto auto auto auto 1fr !important;
align-content: stretch !important;
background: var(--faye-panel) !important;
border: 2px solid var(--faye-periwinkle-light) !important;
box-shadow: 3px 3px 0 rgba(20,30,80,0.8) !important;
text-align: left !important;
}
button[aria-label^="Preview "]:hover,
button[aria-label^="Preview "]:focus-visible,
button[aria-label^="Preview "][aria-pressed="true"] {
background: var(--faye-panel) !important;
border-color: var(--faye-pink) !important;
box-shadow: 3px 3px 0 rgba(224,138,160,0.55) !important;
transform: none !important;
}
/* header: avatar ring + name + handle */
button[aria-label^="Preview "]::before {
content: "\2665" !important;
grid-area: 1 / 1 / 3 / 2;
align-self: center; justify-self: center;
display: flex !important;
align-items: center; justify-content: center;
width: 28px !important; height: 28px !important;
margin: 8px 0 6px 8px !important;
padding: 0 !important;
border: none !important;
border-radius: 50% !important;
background: linear-gradient(135deg, var(--faye-pink), var(--faye-purple), var(--faye-periwinkle)) !important;
box-shadow: 0 0 0 2px var(--faye-panel), 0 0 0 4px var(--faye-pink) !important;
color: var(--faye-white) !important;
font-family: 'Pixelify Sans', monospace !important;
font-size: 13px !important;
line-height: 1 !important;
text-shadow: none !important;
}
button[aria-label^="Preview "] [class*="cardFooter" i] {
display: contents !important;
}
button[aria-label^="Preview "] [class*="cardFooter" i]::after {
content: "View all comments" !important;
display: block !important;
grid-area: 7 / 1 / 8 / 3;
align-self: end;
margin: 0 !important;
border: none !important;
padding: 4px 10px 10px !important;
text-align: left !important;
color: var(--faye-periwinkle) !important;
font-family: 'Pixelify Sans', monospace !important;
font-size: 11px !important;
}
button[aria-label^="Preview "] [class*="cardName" i] {
grid-area: 1 / 2;
align-self: end;
min-width: 0;
padding: 8px 10px 0 4px !important;
font-size: 18px !important;
line-height: 1.1 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
button[aria-label^="Preview "] [class*="cardMeta" i] {
grid-area: 2 / 2;
min-width: 0;
padding: 0 10px 8px 4px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
button[aria-label^="Preview "] [class*="imageFrame" i] {
grid-area: 3 / 1 / 4 / 3;
border: none !important;
border-top: 2px solid var(--faye-periwinkle-light) !important;
border-bottom: 2px solid var(--faye-periwinkle-light) !important;
}
/* like / comment / share + likes line */
button[aria-label^="Preview "]::after {
content: "\2661 \2709 \27A4\A liked by fayeful_ and others" !important;
grid-area: 4 / 1 / 5 / 3;
display: block !important;
padding: 8px 10px 4px !important;
color: var(--faye-text) !important;
font-family: 'VT323', monospace !important;
font-size: 15px !important;
line-height: 1.25 !important;
white-space: pre-line !important;
}
/* caption: description, then tags as plain #hashtags */
button[aria-label^="Preview "] [class*="cardDescription" i] {
grid-area: 5 / 1 / 6 / 3;
padding: 2px 10px 4px !important;
color: var(--faye-text) !important;
font-family: 'Pixelify Sans', monospace !important;
font-size: 12px !important;
}
button[aria-label^="Preview "] [class*="cardFooter" i] > [class*="tags" i] {
grid-area: 6 / 1 / 7 / 3;
display: flex !important;
flex-wrap: wrap !important;
gap: 0 6px !important;
max-height: none !important;
overflow: visible !important;
padding: 2px 10px 6px !important;
margin: 0 !important;
}
button[aria-label^="Preview "] [class*="cardFooter" i] > [class*="tags" i] > * {
height: auto !important;
background: none !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
filter: none !important;
text-shadow: none !important;
padding: 0 !important;
color: var(--faye-periwinkle-light) !important;
font-family: 'Pixelify Sans', monospace !important;
font-size: 12px !important;
line-height: 1.5 !important;
font-weight: 400 !important;
text-transform: lowercase !important;
}
button[aria-label^="Preview "] [class*="cardFooter" i] > [class*="tags" i] > [class*="tag_"]::before { content: "#"; }
button[aria-label^="Preview "] [class*="cardFooter" i] > [class*="tags" i] > [class*="tagOverflow" i] { color: var(--faye-periwinkle) !important; }
/* chats = messenger cards (the classic "online now" card), 3:4 cell kept */
[data-component="LandingPageChats"] [class*="_card_"]:not([class*="_cardContent_"]) {
position: relative !important;
background: var(--faye-panel) !important;
border: 2px solid var(--faye-periwinkle-light) !important;
border-radius: 0 !important;
box-shadow: 3px 3px 0 rgba(20,30,80,0.8) !important;
clip-path: none !important;
overflow: hidden !important;
transition: border-color 0.15s, box-shadow 0.15s !important;
}
[data-component="LandingPageChats"] [class*="_card_"]:not([class*="_cardContent_"]):hover {
border-color: var(--faye-pink) !important;
box-shadow: 3px 3px 0 rgba(224,138,160,0.55) !important;
}
[data-component="LandingPageChats"] [class*="_card_"]:not([class*="_cardContent_"])::before {
content: "\25CF online now" !important;
display: block !important;
position: absolute !important;
top: 0; left: 0; right: 0;
z-index: 3;
height: 20px;
padding: 0 8px;
background: var(--faye-tb-pink);
border-bottom: 2px solid var(--faye-periwinkle-light);
color: var(--faye-white);
font-family: 'VT323', monospace;
font-size: 13px;
line-height: 20px;
letter-spacing: 0.5px;
text-shadow: 1px 1px 0 rgba(52,73,121,0.4);
white-space: nowrap;
pointer-events: none;
}
[data-component="LandingPageChats"] [class*="_card_"]:not([class*="_cardContent_"])::after {
content: "" !important;
display: block !important;
position: absolute !important;
left: 0; right: 0; bottom: 0;
z-index: 3;
height: 34px;
box-sizing: border-box;
padding: 0 10px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 26'%3E%3Crect x='0' y='0' width='28' height='26' fill='%237e83ce' shape-rendering='crispEdges'/%3E%3Crect x='2' y='2' width='24' height='22' fill='%231a1f35' shape-rendering='crispEdges'/%3E%3Cg transform='translate(6,5) scale(0.6667)' fill='none' stroke='%23c8caee' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/g%3E%3Crect x='31' y='0' width='28' height='26' fill='%237e83ce' shape-rendering='crispEdges'/%3E%3Crect x='33' y='2' width='24' height='22' fill='%231a1f35' shape-rendering='crispEdges'/%3E%3Cg transform='translate(37,5) scale(0.6667)' fill='none' stroke='%23c8caee' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 8-6 4 6 4V8Z M4 6h10a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2z'/%3E%3C/g%3E%3Crect x='62' y='0' width='28' height='26' fill='%237e83ce' shape-rendering='crispEdges'/%3E%3Crect x='64' y='2' width='24' height='22' fill='%231a1f35' shape-rendering='crispEdges'/%3E%3Cg transform='translate(68,5) scale(0.6667)' fill='none' stroke='%23e08aa0' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22Z'/%3E%3C/g%3E%3C/svg%3E") right 8px center / 92px 26px no-repeat, var(--faye-panel);
border-top: 2px solid var(--faye-periwinkle-light);
pointer-events: none;
}
[data-component="LandingPageChats"] [class*="_cardShine_"],
[data-component="LandingPageChats"] [class*="_cardImageOverlay_"] { display: none !important; }
[data-component="LandingPageChats"] [class*="_cardBtn_"] {
position: relative !important;
display: block !important;
width: 100% !important;
aspect-ratio: 3 / 4.8 !important;
padding: 0 !important;
background: transparent !important;
}
[data-component="LandingPageChats"] [class*="_cardImage_"] {
position: absolute !important;
top: 20px !important; left: 0 !important; right: 0 !important; bottom: 80px !important;
width: auto !important; max-width: none !important;
height: auto !important;
aspect-ratio: auto !important;
transform: none !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
background: var(--faye-bg) !important;
border-top: 2px solid var(--faye-periwinkle-light) !important;
border-bottom: 2px solid var(--faye-periwinkle-light) !important;
overflow: hidden !important;
}
[data-component="LandingPageChats"] [class*="_cardImage_"]::before,
[data-component="LandingPageChats"] [class*="_cardImage_"]::after { display: none !important; }
[data-component="LandingPageChats"] [class*="_cardImage_"] :is(img, picture img) {
width: 100% !important; height: 100% !important;
object-fit: cover !important;
object-position: center !important;
filter: none !important;
}
[data-component="LandingPageChats"] [class*="_cardContent_"] { display: contents !important; }
[data-component="LandingPageChats"] [class*="_cardName_"] {
position: absolute !important;
left: 0; right: 0; bottom: 58px;
z-index: 3;
display: block !important;
height: 22px !important;
margin: 0 !important;
padding: 0 10px !important;
background: var(--faye-panel) !important;
border: none !important;
color: var(--faye-white) !important;
font-family: 'VT323', monospace !important;
font-size: 17px !important;
line-height: 22px !important;
letter-spacing: 0.5px !important;
text-align: left !important;
text-shadow: none !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
pointer-events: none !important;
-webkit-line-clamp: unset !important;
}
[data-component="LandingPageChats"] [class*="_cardName_"]::before,
[data-component="LandingPageChats"] [class*="_cardName_"]::after,
[data-component="LandingPageChats"] [class*="_cardName_"] svg { display: none !important; }
[data-component="LandingPageChats"] [class*="_cardName_"] span {
display: inline !important;
white-space: nowrap !important;
}
[data-component="LandingPageChats"] [class*="_cardMeta_"] {
position: absolute !important;
left: 0; right: 0; bottom: 34px;
z-index: 3;
display: flex !important;
align-items: center !important;
gap: 8px !important;
height: 24px !important;
padding: 0 10px !important;
background: var(--faye-panel) !important;
border: none !important;
box-shadow: none !important;
pointer-events: none !important;
}
[data-component="LandingPageChats"] [class*="_cardMeta_"]::before { display: none !important; }
[data-component="LandingPageChats"] [class*="_cardMeta_"] :is([class*="_cardTime_"], [class*="_chatCountBadge_"], [class*="_groupBadge_"]) {
padding: 0 !important;
border: none !important;
border-radius: 0 !important;
background: transparent !important;
color: var(--faye-lavender) !important;
font-family: 'Pixelify Sans', monospace !important;
font-size: 11px !important;
}
/* ---- smaller screens ---- */
@media (max-width: 760px) {
/* one post per row, like scrolling a feed */
[data-component="HomepageCharacterLibrary"] [data-view-mode="grid"] {
grid-template-columns: minmax(0, 1fr) !important;
}
[data-component="HomepageCharacterLibrary"] [data-view-mode="grid"] [class*="imageFrame" i] {
height: auto !important;
min-height: 0 !important;
aspect-ratio: 4 / 5 !important;
}
}
@media (max-width: 900px) {
[data-component="LandingPageMain"] { padding: 34px 8px 8px !important; }
}
@media (max-width: 760px) {
/* wordmark on its own line, then search + settings icon side by side */
[data-component="HomepageCharacterLibrary"] > [class*="_header_"] {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 10px !important;
}
[data-component="HomepageCharacterLibrary"] > [class*="_header_"] > div:first-child { flex: 1 1 100% !important; }
[data-component="HomepageCharacterLibrary"] > [class*="_header_"] [class*="searchField"] { flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; margin-left: 0 !important; }
[data-component="HomepageCharacterLibrary"] > [class*="_header_"] [class*="settingsBtn"] { width: 34px !important; flex: 0 0 34px !important; }
[data-component="LandingPageTabs"] [class*="landingSearch"] { margin-left: 0 !important; flex-basis: 100% !important; max-width: none !important; }
}
/* messenger contact: "last seen" line */
[data-component="LandingPageChats"] [class*="_cardMeta_"] [class*="_cardTime_"]::before { content: "last seen "; color: var(--faye-periwinkle-light); }
[data-component="LandingPageChats"] [class*="_cardMeta_"] :is([class*="_cardTime_"], [class*="_chatCountBadge_"], [class*="_groupBadge_"]) { font-size: 13px !important; font-family: 'VT323', monospace !important; letter-spacing: 0.5px !important; }
/* gradient title bars => the frame follows the gradient */
[data-component="LandingPageMain"] { border: 3px solid transparent !important; border-image: var(--faye-tb-pink) 1 !important; }
[data-component="LandingPageChats"] [class*="_card_"]:not([class*="_cardContent_"]) { border: 2px solid transparent !important; border-image: var(--faye-tb-pink) 1 !important; }
[data-component="LandingPageChats"] [class*="_card_"]:not([class*="_cardContent_"]):hover { border-image: linear-gradient(var(--faye-pink), var(--faye-pink)) 1 !important; }
aside[class*="preview" i] { border: 4px solid transparent !important; border-image: var(--faye-tb-pink) 1 !important; }
/* ===================== PREVIEW PANEL — popup ad =====================
real DOM (Lumiverse core): aside.preview[data-pinned] > previewControls, previewBody >
(previewImageFrame, previewMetadata > (previewHeader, previewDescription, previewTags > span,
previewSection > h4 + lastChat > strong + p)), openChatBtn. Host layout is left alone except:
- pinned (desktop): floats top-right, sized so the buttons never fall off-screen
- unpinned (desktop): sticks while scrolling
- phones: docked in flow above the cards instead of a blocking modal */
aside[class*="preview" i] {
box-sizing: border-box !important;
box-shadow: 6px 6px 0 rgba(20,30,80,0.9), 0 0 0 2px var(--faye-indigo), 0 10px 40px rgba(0,0,0,0.55) !important;
}
/* the banner may wrap (it was clipped on phones); pin/close stay put, everything else moves down */
aside[class*="preview" i]::before {
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
line-height: 1.15 !important;
padding: 8px 78px 8px 12px !important;
}
/* desktop: sit in the grid's side column, under the search/filters, and stay put while scrolling,
inside the fayegram window (pinned or not) */
@media (min-width: 761px) {
[data-component="HomepageCharacterLibrary"] [class*="_body_"] { overflow: visible !important; }
aside[class*="preview" i][data-pinned] {
position: sticky !important;
top: 12px !important;
right: auto !important; left: auto !important; bottom: auto !important;
align-self: start !important;
width: 100% !important;
max-width: 100% !important;
max-height: calc(100dvh - 24px) !important;
z-index: 2 !important;
}
}
/* kill the dead space above the buttons: metadata/lastChat padding, buttons overlay the aside's own 62px bottom padding */
aside[class*="preview" i] [class*="previewMetadata" i] { padding: 0 14px 6px !important; }
/* fixed 3:4 photo, same ratio as phones */
aside[class*="preview" i] [class*="previewImageFrame" i] {
width: 280px !important;
height: 373px !important;
max-width: 100% !important;
margin: 8px auto !important;
}
aside[class*="preview" i] [class*="openChatBtn" i] {
background: linear-gradient(135deg, var(--faye-pink), var(--faye-lavender)) !important;
}
aside[class*="preview" i] [class*="openChatBtn" i]::after {
content: "CHAT NOW!!" !important;
max-width: none !important;
font-size: 18px !important;
letter-spacing: 1px !important;
}
/* poster stickers on the photo */
aside[class*="preview" i] [class*="previewImageFrame" i]::before,
aside[class*="preview" i] [class*="previewImageFrame" i]::after {
position: absolute;
inset: auto;
z-index: 3;
display: flex;
align-items: center; justify-content: center;
width: 58px; height: 58px;
clip-path: polygon(100.0% 50.0%, 83.3% 63.8%, 85.4% 85.4%, 63.8% 83.3%, 50.0% 100.0%, 36.2% 83.3%, 14.6% 85.4%, 16.7% 63.8%, 0.0% 50.0%, 16.7% 36.2%, 14.6% 14.6%, 36.2% 16.7%, 50.0% 0.0%, 63.8% 16.7%, 85.4% 14.6%, 83.3% 36.2%);
color: var(--faye-panel-dark);
font-family: 'VT323', monospace;
font-size: 17px;
line-height: 1;
pointer-events: none;
}
aside[class*="preview" i] [class*="previewImageFrame" i]::after {
content: "NEW!";
top: 4px; left: 4px;
background: var(--faye-yellow);
transform: rotate(-14deg);
}
aside[class*="preview" i] [class*="previewImageFrame" i]::before {
content: "FREE!";
bottom: 4px; right: 4px;
background: var(--faye-pink);
transform: rotate(12deg);
}
/* name + "as seen on" */
aside[class*="preview" i] [class*="previewHeader" i] { flex-wrap: wrap !important; }
aside[class*="preview" i] [class*="previewHeader" i]::before {
content: "\2605 NOW STARRING \2605";
flex: 0 0 100%;
text-align: center;
color: var(--faye-yellow);
font-family: 'VT323', monospace;
font-size: 16px;
letter-spacing: 3px;
}
aside[class*="preview" i] [class*="previewHeader" i] p::before { content: "as seen on @"; }
aside[class*="preview" i] [class*="previewDescription" i] {
color: var(--faye-text-dim) !important;
font-family: 'Pixelify Sans', monospace !important;
text-align: center !important;
}
/* tags = poster sticker words; "Alt greetings" (the span with no class) = BONUS ribbon */
aside[class*="preview" i] [class*="previewTags" i] { gap: 4px 6px !important; justify-content: center !important; }
aside[class*="preview" i] [class*="previewTags" i] > span {
height: auto !important;
margin: 3px 2px !important;
padding: 1px 8px !important;
background: var(--faye-pink) !important;
color: var(--faye-panel-dark) !important;
border: 2px solid var(--faye-panel-dark) !important;
border-radius: 0 !important;
box-shadow: 2px 2px 0 rgba(20,30,80,0.9) !important;
font-family: 'VT323', monospace !important;
font-size: 17px !important;
letter-spacing: 1px !important;
text-transform: uppercase !important;
transform: rotate(-2deg);
}
aside[class*="preview" i] [class*="previewTags" i] > span:nth-child(3n+2) { background: var(--faye-lavender) !important; transform: rotate(1.5deg); }
aside[class*="preview" i] [class*="previewTags" i] > span:nth-child(3n) { background: var(--faye-mint) !important; transform: rotate(-1deg); }
aside[class*="preview" i] [class*="previewTags" i] > span:not([class]):has(svg) {
background: var(--faye-yellow) !important;
border: 2px dashed var(--faye-panel-dark) !important;
transform: rotate(-2deg);
}
aside[class*="preview" i] [class*="previewTags" i] > span:not([class]):has(svg)::before { content: "BONUS! "; }
aside[class*="preview" i] [class*="previewTags" i] > span svg { color: var(--faye-panel-dark) !important; }
/* last chat = customer review, with the actual last message */
aside[class*="preview" i] [class*="previewSection" i] h4 { font-size: 0 !important; }
aside[class*="preview" i] [class*="previewSection" i] h4 svg { display: none !important; }
aside[class*="preview" i] [class*="previewSection" i] h4::after {
content: "Customer Reviews";
font-family: 'VT323', monospace;
font-size: 18px;
letter-spacing: 1px;
color: var(--faye-yellow);
}
aside[class*="preview" i] [class*="lastChat" i] {
border: 2px dashed var(--faye-pink) !important;
border-radius: 0 !important;
min-height: 0 !important;
max-height: none !important;
overflow: visible !important;
margin-bottom: 4px !important;
}
aside[class*="preview" i] [class*="lastChat" i] strong { white-space: normal !important; }
aside[class*="preview" i] [class*="lastChat" i] strong::before { content: "Verified Chatter \2714 \00B7 "; color: var(--faye-pink); }
aside[class*="preview" i] [class*="lastChat" i] p {
font-style: italic;
-webkit-line-clamp: 12 !important;
line-clamp: 12 !important;
}
aside[class*="preview" i] [class*="lastChat" i] p::before { content: "\201C"; }
aside[class*="preview" i] [class*="lastChat" i] p::after { content: "\201D"; }
aside[class*="preview" i] [class*="lastChat" i]::after {
content: "\2605\2605\2605\2605\2605" !important;
position: static !important;
display: block !important;
width: auto !important; height: auto !important;
margin-top: 8px !important;
border: none !important;
color: var(--faye-yellow) !important;
font-family: 'VT323', monospace !important;
font-size: 20px !important;
letter-spacing: 3px !important;
}
/* phones: dock above the cards (grid item, order -1) instead of a blocking modal */
@media (max-width: 760px) {
aside[class*="preview" i][data-pinned] {
position: relative !important;
inset: auto !important;
left: auto !important; right: auto !important; top: auto !important;
transform: none !important;
order: -1 !important;
width: 100% !important;
max-width: 100% !important;
max-height: min(84dvh, 700px) !important;
margin: 0 0 12px !important;
z-index: auto !important;
}
aside[class*="preview" i][data-pinned]::after { display: none !important; }
aside[class*="preview" i] [class*="previewBackdrop" i] { display: none !important; }
aside[class*="preview" i] [class*="previewImageFrame" i] {
width: min(280px, calc(100vw - 110px)) !important;
height: calc(min(280px, calc(100vw - 110px)) * 1.3333) !important;
margin: 8px auto !important;
}
}
/* ===================== CHAT — "Love Robot" console =====================
real DOM: [data-component=MinimalMessage][data-part=character|user|streaming]
> .avatar (div > img) .bubble (.header > .name + .metaPill, MessageContent, ...) .actionsWrap > div > buttons
The card becomes ONE grid; .bubble is display:contents so its header and body join it:
row 1 header = chunky name strip (+ time/index, hearts)
row 2 actionsWrap = pink icon column | avatar = the screen | card::before = heart card + SAVE
(character: icons | screen | heart card user: icons | heart card | screen)
row 3 card::after = refresh button + progress bar
row 4+ the message text window (MessageContent ::before = its title bar)
The lavender shell is painted as card background layers, so its height is fixed:
--shell-h must equal 12 + hdr + 10 + scr-h + 10 + bar + 12. */
[data-component="MinimalMessage"] {
--ic-w: 56px;
--scr-w: 225px; /* screen is 3:4 (same crop as the cards) */
--scr-h: 300px;
--hdr-h: 64px;
--bar-h: 40px;
--shell-h: 448px;
--row-h: 300px; /* height of the console body row (icons | screen | panel) */
--faye-quote: "always know that\A you are loved."; /* <- edit: quote in the character panel (\A = line break) */
--cut-x: 204px; /* width of the notch at the top right */
--cut-d: 30px; /* horizontal run of the diagonal */
--cut-y: 30px; /* depth of the notch */
position: relative !important;
display: grid !important;
grid-template-columns: var(--ic-w) var(--scr-w) minmax(0, 1fr) !important;
grid-template-rows: var(--hdr-h) var(--row-h) var(--bar-h) !important;
grid-auto-rows: auto !important;
gap: 10px 12px !important;
align-items: start !important;
padding: 12px 12px 0 !important;
margin-bottom: 30px !important;
/* folder-tab silhouette: the top-right corner is cut down to the body edge (--cut-x from the right, --cut-y deep) */
clip-path: polygon(0 0, calc(100% - var(--cut-x) - var(--cut-d)) 0, calc(100% - var(--cut-x)) var(--cut-y), 100% var(--cut-y), 100% 100%, 0 100%) !important;
background:
linear-gradient(to top right, transparent calc(50% - 2px), var(--faye-lavender) calc(50% - 2px), var(--faye-lavender) 50%, transparent 50%) right calc(var(--cut-x) - 2px) top 0 / calc(var(--cut-d) + 2px) calc(var(--cut-y) + 2px) no-repeat,
linear-gradient(var(--faye-lavender), var(--faye-lavender)) right 0 top var(--cut-y) / calc(var(--cut-x) + 2px) 2px no-repeat,
linear-gradient(var(--faye-panel), var(--faye-panel)) 2px 2px / calc(100% - 4px) calc(var(--shell-h) - 4px) no-repeat,
linear-gradient(var(--faye-lavender), var(--faye-lavender)) 0 0 / 100% var(--shell-h) no-repeat !important;
}
[data-component="MinimalMessage"][data-part="user"] {
--faye-quote: "constant as the\A stars above,"; /* <- edit: quote in the user panel (\A = line break) */
grid-template-columns: minmax(0, 1fr) var(--scr-w) var(--ic-w) !important;
}
/* user mirrors the character: panel | screen | icons */
[data-component="MinimalMessage"][data-part="user"] [class*="actionsWrap" i] { grid-column: 3 !important; }
/* ---- header = top strip with the chunky name ---- */
[data-component="MinimalMessage"] [class*="bubble" i] { display: contents !important; }
[data-component="MinimalMessage"] > [class*="bubble" i] > [class*="header" i] {
grid-column: 1 / -1 !important;
grid-row: 1 !important;
justify-self: start !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
flex-wrap: nowrap !important;
gap: 12px !important;
box-sizing: border-box !important;
width: calc(100% - var(--cut-x) - var(--cut-d) - 12px) !important; /* sits inside the folder tab */
height: var(--hdr-h) !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 14px !important;
background: var(--faye-tb-pink) !important;
border: 2px solid var(--faye-lavender) !important;
border-radius: 0 !important;
position: relative !important;
z-index: 2 !important;
}
[data-theme-mode] [data-component="MinimalMessage"] > [class*="bubble" i] > [class*="header" i] > [class*="name" i],
[data-theme-mode=dark] [data-component="MinimalMessage"] > [class*="bubble" i] > [class*="header" i] > [class*="name" i],
[data-theme-mode] [data-component="MinimalMessage"][data-part="user"] > [class*="bubble" i] > [class*="header" i] > [class*="name" i],
[data-theme-mode=dark] [data-component="MinimalMessage"][data-part="user"] > [class*="bubble" i] > [class*="header" i] > [class*="name" i] {
flex: 1 1 auto !important;
width: auto !important;
min-width: 0 !important;
padding: 0 !important;
background: none !important;
border: none !important;
-webkit-text-fill-color: #ffffff !important;
color: #ffffff !important;
font-family: 'Pixelify Sans', monospace !important;
font-weight: 700 !important;
font-size: 42px !important;
line-height: 1 !important;
letter-spacing: 2px !important;
text-shadow: 3px 3px 0 var(--faye-pink), 6px 6px 0 var(--faye-indigo) !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
[data-theme-mode] [data-component="MinimalMessage"][data-part="user"] > [class*="bubble" i] > [class*="header" i] > [class*="name" i],
[data-theme-mode=dark] [data-component="MinimalMessage"][data-part="user"] > [class*="bubble" i] > [class*="header" i] > [class*="name" i] {
text-shadow: 3px 3px 0 var(--faye-purple), 6px 6px 0 var(--faye-indigo) !important;
}
[data-component="MinimalMessage"] > [class*="bubble" i] > [class*="header" i] > [class*="metaPill" i] {
display: inline-flex !important;
flex: 0 1 auto !important;
margin-left: auto !important;
padding: 0 !important;
background: none !important;
border: none !important;
color: #e8e9fb !important;
font-family: 'VT323', monospace !important;
font-size: 16px !important;
letter-spacing: 0.5px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-shadow: 1px 1px 0 rgba(52,73,121,0.6) !important;
}
/* ---- pink icon column = the message actions ---- */
[data-component="MinimalMessage"] [class*="actionsWrap" i] {
grid-column: 1 !important;
grid-row: 2 !important;
align-self: stretch !important;
position: relative !important;
top: auto !important; right: auto !important; left: auto !important; /* host's phone rule offsets it */
z-index: 2 !important;
margin: 0 !important;
width: auto !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
}
[data-component="MinimalMessage"] [class*="actionsWrap" i] > div {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 4px !important;
box-sizing: border-box !important;
height: 100% !important;
margin: 0 !important;
padding: 8px 0 !important;
background: var(--faye-panel-dark) !important;
border: 2px solid var(--faye-lavender) !important;
overflow: hidden !important;
}
[data-component="MinimalMessage"] [class*="actionsWrap" i] button {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 30px !important; height: 30px !important;
min-width: 0 !important; min-height: 0 !important;
padding: 0 !important;
flex: none !important;
background: var(--faye-panel) !important;
border: 2px solid !important;
border-color: var(--faye-lavender) var(--faye-border-dark) var(--faye-border-dark) var(--faye-lavender) !important;
border-radius: 0 !important;
color: var(--faye-text) !important;
box-shadow: none !important;
}
[data-component="MinimalMessage"] [class*="actionsWrap" i] button svg { width: 14px !important; height: 14px !important; stroke: currentColor !important; }
[data-component="MinimalMessage"] [class*="actionsWrap" i] button:hover { background: var(--faye-indigo) !important; color: #ffffff !important; }
[data-component="MinimalMessage"] [class*="actionsWrap" i] button:active,
[data-component="MinimalMessage"] [class*="actionsWrap" i] button[aria-pressed="true"] { background: var(--faye-panel-dark) !important; border-color: var(--faye-border-dark) var(--faye-lavender) var(--faye-lavender) var(--faye-border-dark) !important; color: var(--faye-pink) !important; }
[data-component="MinimalMessage"] [class*="actionsWrap" i] button:disabled { opacity: 0.45 !important; }
/* ---- the screen = avatar ---- */
[data-component="MinimalMessage"] [class*="avatar" i]:not([class*="avatarFallback" i]),
[data-component="MinimalMessage"][data-part="user"] [class*="avatar" i]:not([class*="avatarFallback" i]) {
grid-column: 2 !important;
grid-row: 2 !important;
align-self: center !important;
position: relative !important;
z-index: 2 !important;
display: block !important;
box-sizing: border-box !important;
width: var(--scr-w) !important;
height: var(--scr-h) !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
background: var(--faye-panel-dark) !important;
border: 2px solid var(--faye-white) !important;
border-radius: 0 !important;
box-shadow: 0 0 0 2px var(--faye-pink), 5px 5px 0 2px rgba(10,13,28,0.85) !important;
flex-direction: row !important;
}
[data-component="MinimalMessage"][data-part="user"] [class*="avatar" i]:not([class*="avatarFallback" i]) {
box-shadow: 0 0 0 2px var(--faye-purple), 5px 5px 0 2px rgba(10,13,28,0.85) !important;
}
[data-component="MinimalMessage"][data-part="user"] [class*="avatar" i]:not([class*="avatarFallback" i]) { grid-column: 2 !important; }
[data-component="MinimalMessage"] [class*="avatar" i]:not([class*="avatarFallback" i]) > div { display: contents !important; }
[data-component="MinimalMessage"] [class*="avatar" i]:not([class*="avatarFallback" i]) img {
display: block !important;
position: static !important;
width: 100% !important; height: 100% !important;
min-width: 0 !important; max-width: none !important;
margin: 0 !important;
object-fit: cover !important;
object-position: center !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
translate: 0 0 !important;
}
[data-component="MinimalMessage"] [class*="avatar" i]:not([class*="avatarFallback" i])::before,
[data-component="MinimalMessage"][data-part="user"] [class*="avatar" i]:not([class*="avatarFallback" i])::before {
content: "\25AE\25AE\25AF" !important;
position: absolute !important;
top: 8px !important; right: 10px !important; left: auto !important;
width: auto !important; height: auto !important;
padding: 0 !important;
background: none !important;
border: none !important;
color: #ffffff !important;
font-family: 'VT323', monospace !important;
font-size: 18px !important;
line-height: 1 !important;
letter-spacing: 1px !important;
text-shadow: 1px 1px 0 rgba(14,17,32,0.8) !important;
z-index: 3 !important;
}
[data-component="MinimalMessage"] [class*="avatar" i]:not([class*="avatarFallback" i])::after,
[data-component="MinimalMessage"][data-part="user"] [class*="avatar" i]:not([class*="avatarFallback" i])::after { content: none !important; display: none !important; }
/* ---- affection panel + SAVE (card::before) ---- */
[data-component="MinimalMessage"]::before {
content: "AFFECTION\A \2588\2588\2588\2588\2588\2588\2588\2591\2591\2591 72%\A \A TRUST\A \2588\2588\2588\2588\2588\2591\2591\2591\2591\2591 50%\A \A ENERGY\A \2588\2588\2588\2591\2591\2591\2591\2591\2591\2591 30%" !important;
display: block !important;
position: relative !important;
grid-column: 3 !important;
grid-row: 2 !important;
align-self: stretch !important;
box-sizing: border-box !important;
width: auto !important; height: auto !important;
left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
padding: 25px 10px 0 148px !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
white-space: pre-wrap !important;
text-align: center !important;
color: var(--faye-text-dim) !important;
font-family: 'VT323', monospace !important;
font-size: 17px !important;
line-height: 19px !important;
letter-spacing: 1px !important;
overflow: hidden !important;
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 53 8' shape-rendering='crispEdges'%3E%3Cg transform='translate(0 0)' fill='%23e08aa0'%3E%3Cpath d='M1 0h2v1h1v1h1V1h1V0h2v1h1v3h-1v1h-1v1h-1v1H5v1H4V7H3V6H2V5H1V4H0V1h1z'/%3E%3C/g%3E%3Cg transform='translate(11 0)' fill='%23e08aa0'%3E%3Cpath d='M1 0h2v1h1v1h1V1h1V0h2v1h1v3h-1v1h-1v1h-1v1H5v1H4V7H3V6H2V5H1V4H0V1h1z'/%3E%3C/g%3E%3Cg transform='translate(22 0)' fill='%23e08aa0'%3E%3Cpath d='M1 0h2v1h1v1h1V1h1V0h2v1h1v3h-1v1h-1v1h-1v1H5v1H4V7H3V6H2V5H1V4H0V1h1z'/%3E%3C/g%3E%3Cg transform='translate(33 0)' fill='%23e08aa0'%3E%3Cpath d='M1 0h2v1h1v1h1V1h1V0h2v1h1v3h-1v1h-1v1h-1v1H5v1H4V7H3V6H2V5H1V4H0V1h1z'/%3E%3C/g%3E%3Cg transform='translate(44 0)' fill='%23344979'%3E%3Cpath d='M1 0h2v1h1v1h1V1h1V0h2v1h1v3h-1v1h-1v1h-1v1H5v1H4V7H3V6H2V5H1V4H0V1h1z'/%3E%3C/g%3E%3C/svg%3E") 19px 164px / 96px 14px no-repeat,
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-3 0 48 14' shape-rendering='crispEdges'%3E%3Cpath fill='none' stroke='%23e08aa0' stroke-width='1' d='M0 8h10v-0h2v-2h2v2h2v4h2v-10h2v14h2v-8h2v2h12v-1h4v-1h2'/%3E%3C/svg%3E") 11px 190px / 112px 36px no-repeat,
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 19' shape-rendering='crispEdges'%3E%3Crect x='2' y='1' width='1' height='1' fill='%23c8caee'/%3E%3Crect x='1' y='2' width='1' height='1' fill='%23c8caee'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='3' y='2' width='1' height='1' fill='%23c8caee'/%3E%3Crect x='10' y='2' width='1' height='1' fill='%23c8caee'/%3E%3Crect x='17' y='2' width='1' height='1' fill='%23c8caee'/%3E%3Crect x='2' y='3' width='1' height='1' fill='%23c8caee'/%3E%3Crect x='10' y='3' width='1' height='1' fill='%23e08aa0'/%3E%3Crect x='16' y='3' width='1' height='1' fill='%23c8caee'/%3E%3Crect x='17' y='3' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='18' y='3' width='1' height='1' fill='%23c8caee'/%3E%3Crect x='10' y='4' width='1' height='1' fill='%23e08aa0'/%3E%3Crect x='17' y='4' width='1' height='1' fill='%23c8caee'/%3E%3Crect x='9' y='5' width='1' height='1' fill='%23e08aa0'/%3E%3Crect x='10' y='5' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='11' y='5' width='1' height='1' fill='%23e08aa0'/%3E%3Crect x='9' y='6' width='1' height='1' fill='%23e08aa0'/%3E%3Crect x='10' y='6' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='11' y='6' width='1' height='1' fill='%23e08aa0'/%3E%3Crect x='7' y='7' width='1' height='1' fill='%23e08aa0'/%3E%3Crect x='8' y='7' width='1' height='1' fill='%23e08aa0'/%3E%3Crect x='9' y='7' width='1' height='1' fill='%23e08aa0'/%3E%3Crect x='10' y='7' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='11' y='7' width='1' height='1' fill='%23e08aa0'/%3E%3Crect x='12' y='7' width='1' height='1' fill='%23e08aa0'/%3E%3Crect x='13' y='7' width='1' height='1' fill='%23e08aa0'/%3E%3Crect x='4' y='8' width='1' height='1' fill='%23c8caee'/%3E%3Crect x='5' y='8' width='1' height='1' fill='%23e08aa0'/%3E%3Crect x='6' y='8' width='1' height='1' fill='%23e08aa0'/%3E%3Crect x='7' y='8' width='1' height='1' fill='%23e08aa0'/%3E%3Crect x='8' y='8' width='1' height='1' fill='%23e08aa0'/%3E%3Crect x='9' y='8' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='10' y='8' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='11' y='8' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='12' y='8' width='1' height='1' fill='%23e08aa0'/%3E%3Crect x='13' y='8' width='1' height='1' fill='%23e08aa0'/%3E%3Crect x='14' y='8' width='1' height='1' fill='%23e08aa0'/%3E%3Crect x='15' y='8' width='1' height='1' fill='%23e08aa0'/%3E%3Crect x='16' y='8' width='1' height='1' fill='%23c8caee'/%3E%3Crect x='3' y='9' width='1' height='1' fill='%23c8caee'/%3E%3Crect x='4' y='9' width='1' height='1' fill='%23e08aa0'/%3E%3Crect x='5' y='9' width='1' height='1' fill='%23e08aa0'/%3E%3Crect x='6' y='9' width='1' height='1' fill='%23e08aa0'/%3E%3Crect x='7' y='9' width='1' height='1' fill='%23e08aa0'/%3E%3Crect x='8' y='9' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='9' y='9' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='10' y='9' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='11' y='9' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='12' y='9' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='13' y='9' width='1' height='1' fill='%23e08aa0'/%3E%3Crect x='14' y='9' width='1' height='1' fill='%23e08aa0'/%3E%3Crect x='15' y='9' width='1' height='1' fill='%23e08aa0'/%3E%3Crect x='16' y='9' width='1' height='1' fill='%23e08aa0'/%3E%3Crect x='17' y='9' width='1' height='1' fill='%23c8caee'/%3E%3Crect x='4' y='10' width='1' height='1' fill='%23c8caee'/%3E%3Crect x='5' y='10' width='1' height='1' fill='%23e08aa0'/%3E%3Crect x='6' y='10' width='1' height='1' fill='%23e08aa0'/%3E%3Crect x='7' y='10' width='1' height='1' fill='%23e08aa0'/%3E%3Crect x='8' y='10' width='1' height='1' fill='%23e08aa0'/%3E%3Crect x='9' y='10' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='10' y='10' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='11' y='10' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='12' y='10' width='1' height='1' fill='%23e08aa0'/%3E%3Crect x='13' y='10' width='1' height='1' fill='%23e08aa0'/%3E%3Crect x='14' y='10' width='1' height='1' fill='%23e08aa0'/%3E%3Crect x='15' y='10' width='1' height='1' fill='%23e08aa0'/%3E%3Crect x='16' y='10' width='1' height='1' fill='%23c8caee'/%3E%3Crect x='7' y='11' width='1' height='1' fill='%23e08aa0'/%3E%3Crect x='8' y='11' width='1' height='1' fill='%23e08aa0'/%3E%3Crect x='9' y='11' width='1' height='1' fill='%23e08aa0'/%3E%3Crect x='10' y='11' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='11' y='11' width='1' height='1' fill='%23e08aa0'/%3E%3Crect x='12' y='11' width='1' height='1' fill='%23e08aa0'/%3E%3Crect x='13' y='11' width='1' height='1' fill='%23e08aa0'/%3E%3Crect x='9' y='12' width='1' height='1' fill='%23e08aa0'/%3E%3Crect x='10' y='12' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='11' y='12' width='1' height='1' fill='%23e08aa0'/%3E%3Crect x='9' y='13' width='1' height='1' fill='%23e08aa0'/%3E%3Crect x='10' y='13' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='11' y='13' width='1' height='1' fill='%23e08aa0'/%3E%3Crect x='18' y='13' width='1' height='1' fill='%23c8caee'/%3E%3Crect x='10' y='14' width='1' height='1' fill='%23e08aa0'/%3E%3Crect x='17' y='14' width='1' height='1' fill='%23c8caee'/%3E%3Crect x='18' y='14' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='19' y='14' width='1' height='1' fill='%23c8caee'/%3E%3Crect x='10' y='15' width='1' height='1' fill='%23e08aa0'/%3E%3Crect x='18' y='15' width='1' height='1' fill='%23c8caee'/%3E%3Crect x='10' y='16' width='1' height='1' fill='%23c8caee'/%3E%3C/svg%3E") 25px 68px / 84px 76px no-repeat,
linear-gradient(var(--faye-indigo), var(--faye-indigo)) 134px 20px / 2px calc(100% - 40px) no-repeat,
repeating-linear-gradient(to bottom, transparent 0 2px, rgba(93,109,165,0.10) 2px 3px) 2px 2px / calc(100% - 4px) calc(100% - 4px) no-repeat,
linear-gradient(var(--faye-panel-dark), var(--faye-panel-dark)) 2px 2px / calc(100% - 4px) calc(100% - 4px) no-repeat,
linear-gradient(var(--faye-lavender), var(--faye-lavender)) 0 0 / 100% 100% no-repeat !important;
z-index: 2 !important;
pointer-events: none !important;
}
[data-component="MinimalMessage"][data-part="user"]::before {
grid-column: 1 !important;
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 53 8' shape-rendering='crispEdges'%3E%3Cg transform='translate(0 0)' fill='%23e08aa0'%3E%3Cpath d='M1 0h2v1h1v1h1V1h1V0h2v1h1v3h-1v1h-1v1h-1v1H5v1H4V7H3V6H2V5H1V4H0V1h1z'/%3E%3C/g%3E%3Cg transform='translate(11 0)' fill='%23e08aa0'%3E%3Cpath d='M1 0h2v1h1v1h1V1h1V0h2v1h1v3h-1v1h-1v1h-1v1H5v1H4V7H3V6H2V5H1V4H0V1h1z'/%3E%3C/g%3E%3Cg transform='translate(22 0)' fill='%23e08aa0'%3E%3Cpath d='M1 0h2v1h1v1h1V1h1V0h2v1h1v3h-1v1h-1v1h-1v1H5v1H4V7H3V6H2V5H1V4H0V1h1z'/%3E%3C/g%3E%3Cg transform='translate(33 0)' fill='%23e08aa0'%3E%3Cpath d='M1 0h2v1h1v1h1V1h1V0h2v1h1v3h-1v1h-1v1h-1v1H5v1H4V7H3V6H2V5H1V4H0V1h1z'/%3E%3C/g%3E%3Cg transform='translate(44 0)' fill='%23344979'%3E%3Cpath d='M1 0h2v1h1v1h1V1h1V0h2v1h1v3h-1v1h-1v1h-1v1H5v1H4V7H3V6H2V5H1V4H0V1h1z'/%3E%3C/g%3E%3C/svg%3E") 19px 164px / 96px 14px no-repeat,
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-3 0 48 14' shape-rendering='crispEdges'%3E%3Cpath fill='none' stroke='%23e08aa0' stroke-width='1' d='M0 8h10v-0h2v-2h2v2h2v4h2v-10h2v14h2v-8h2v2h12v-1h4v-1h2'/%3E%3C/svg%3E") 11px 190px / 112px 36px no-repeat,
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 19' shape-rendering='crispEdges'%3E%3Crect x='2' y='1' width='1' height='1' fill='%23c8caee'/%3E%3Crect x='1' y='2' width='1' height='1' fill='%23c8caee'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%23c8caee'/%3E%3Crect x='3' y='2' width='1' height='1' fill='%23c8caee'/%3E%3Crect x='18' y='2' width='1' height='1' fill='%23c8caee'/%3E%3Crect x='2' y='3' width='1' height='1' fill='%23c8caee'/%3E%3Crect x='17' y='3' width='1' height='1' fill='%23c8caee'/%3E%3Crect x='18' y='3' width='1' height='1' fill='%23c8caee'/%3E%3Crect x='19' y='3' width='1' height='1' fill='%23c8caee'/%3E%3Crect x='9' y='4' width='1' height='1' fill='%23e8e9fb'/%3E%3Crect x='10' y='4' width='1' height='1' fill='%23e8e9fb'/%3E%3Crect x='11' y='4' width='1' height='1' fill='%23e8e9fb'/%3E%3Crect x='18' y='4' width='1' height='1' fill='%23c8caee'/%3E%3Crect x='7' y='5' width='1' height='1' fill='%23e8e9fb'/%3E%3Crect x='8' y='5' width='1' height='1' fill='%23e8e9fb'/%3E%3Crect x='9' y='5' width='1' height='1' fill='%23e8e9fb'/%3E%3Crect x='10' y='5' width='1' height='1' fill='%23e8e9fb'/%3E%3Crect x='11' y='5' width='1' height='1' fill='%239896bb'/%3E%3Crect x='12' y='5' width='1' height='1' fill='%239896bb'/%3E%3Crect x='13' y='5' width='1' height='1' fill='%239896bb'/%3E%3Crect x='6' y='6' width='1' height='1' fill='%23e8e9fb'/%3E%3Crect x='7' y='6' width='1' height='1' fill='%23e8e9fb'/%3E%3Crect x='8' y='6' width='1' height='1' fill='%23e8e9fb'/%3E%3Crect x='9' y='6' width='1' height='1' fill='%23e8e9fb'/%3E%3Crect x='10' y='6' width='1' height='1' fill='%239896bb'/%3E%3Crect x='11' y='6' width='1' height='1' fill='%239896bb'/%3E%3Crect x='12' y='6' width='1' height='1' fill='%239896bb'/%3E%3Crect x='13' y='6' width='1' height='1' fill='%239896bb'/%3E%3Crect x='14' y='6' width='1' height='1' fill='%239896bb'/%3E%3Crect x='6' y='7' width='1' height='1' fill='%23e8e9fb'/%3E%3Crect x='7' y='7' width='1' height='1' fill='%23e8e9fb'/%3E%3Crect x='8' y='7' width='1' height='1' fill='%23e8e9fb'/%3E%3Crect x='9' y='7' width='1' height='1' fill='%239896bb'/%3E%3Crect x='10' y='7' width='1' height='1' fill='%239896bb'/%3E%3Crect x='11' y='7' width='1' height='1' fill='%239896bb'/%3E%3Crect x='12' y='7' width='1' height='1' fill='%239896bb'/%3E%3Crect x='13' y='7' width='1' height='1' fill='%239896bb'/%3E%3Crect x='14' y='7' width='1' height='1' fill='%235d6da5'/%3E%3Crect x='4' y='8' width='1' height='1' fill='%23e08aa0'/%3E%3Crect x='5' y='8' width='1' height='1' fill='%23e8e9fb'/%3E%3Crect x='6' y='8' width='1' height='1' fill='%23e8e9fb'/%3E%3Crect x='7' y='8' width='1' height='1' fill='%23e8e9fb'/%3E%3Crect x='8' y='8' width='1' height='1' fill='%239896bb'/%3E%3Crect x='9' y='8' width='1' height='1' fill='%239896bb'/%3E%3Crect x='10' y='8' width='1' height='1' fill='%239896bb'/%3E%3Crect x='11' y='8' width='1' height='1' fill='%239896bb'/%3E%3Crect x='12' y='8' width='1' height='1' fill='%239896bb'/%3E%3Crect x='13' y='8' width='1' height='1' fill='%235d6da5'/%3E%3Crect x='14' y='8' width='1' height='1' fill='%235d6da5'/%3E%3Crect x='15' y='8' width='1' height='1' fill='%235d6da5'/%3E%3Crect x='16' y='8' width='1' height='1' fill='%23e08aa0'/%3E%3Crect x='2' y='9' width='1' height='1' fill='%23e08aa0'/%3E%3Crect x='3' y='9' width='1' height='1' fill='%23e08aa0'/%3E%3Crect x='5' y='9' width='1' height='1' fill='%23e8e9fb'/%3E%3Crect x='6' y='9' width='1' height='1' fill='%23e8e9fb'/%3E%3Crect x='7' y='9' width='1' height='1' fill='%239896bb'/%3E%3Crect x='8' y='9' width='1' height='1' fill='%239896bb'/%3E%3Crect x='9' y='9' width='1' height='1' fill='%239896bb'/%3E%3Crect x='10' y='9' width='1' height='1' fill='%239896bb'/%3E%3Crect x='11' y='9' width='1' height='1' fill='%239896bb'/%3E%3Crect x='12' y='9' width='1' height='1' fill='%235d6da5'/%3E%3Crect x='13' y='9' width='1' height='1' fill='%235d6da5'/%3E%3Crect x='14' y='9' width='1' height='1' fill='%235d6da5'/%3E%3Crect x='15' y='9' width='1' height='1' fill='%235d6da5'/%3E%3Crect x='17' y='9' width='1' height='1' fill='%23e08aa0'/%3E%3Crect x='18' y='9' width='1' height='1' fill='%23e08aa0'/%3E%3Crect x='1' y='10' width='1' height='1' fill='%23e08aa0'/%3E%3Crect x='2' y='10' width='1' height='1' fill='%23e08aa0'/%3E%3Crect x='5' y='10' width='1' height='1' fill='%23e8e9fb'/%3E%3Crect x='6' y='10' width='1' height='1' fill='%239896bb'/%3E%3Crect x='7' y='10' width='1' height='1' fill='%239896bb'/%3E%3Crect x='8' y='10' width='1' height='1' fill='%239896bb'/%3E%3Crect x='9' y='10' width='1' height='1' fill='%239896bb'/%3E%3Crect x='10' y='10' width='1' height='1' fill='%239896bb'/%3E%3Crect x='11' y='10' width='1' height='1' fill='%235d6da5'/%3E%3Crect x='12' y='10' width='1' height='1' fill='%235d6da5'/%3E%3Crect x='13' y='10' width='1' height='1' fill='%235d6da5'/%3E%3Crect x='14' y='10' width='1' height='1' fill='%235d6da5'/%3E%3Crect x='15' y='10' width='1' height='1' fill='%235d6da5'/%3E%3Crect x='18' y='10' width='1' height='1' fill='%23e08aa0'/%3E%3Crect x='19' y='10' width='1' height='1' fill='%23e08aa0'/%3E%3Crect x='2' y='11' width='1' height='1' fill='%23e08aa0'/%3E%3Crect x='3' y='11' width='1' height='1' fill='%23e08aa0'/%3E%3Crect x='6' y='11' width='1' height='1' fill='%239896bb'/%3E%3Crect x='7' y='11' width='1' height='1' fill='%239896bb'/%3E%3Crect x='8' y='11' width='1' height='1' fill='%239896bb'/%3E%3Crect x='9' y='11' width='1' height='1' fill='%239896bb'/%3E%3Crect x='10' y='11' width='1' height='1' fill='%235d6da5'/%3E%3Crect x='11' y='11' width='1' height='1' fill='%235d6da5'/%3E%3Crect x='12' y='11' width='1' height='1' fill='%235d6da5'/%3E%3Crect x='13' y='11' width='1' height='1' fill='%235d6da5'/%3E%3Crect x='14' y='11' width='1' height='1' fill='%235d6da5'/%3E%3Crect x='17' y='11' width='1' height='1' fill='%23e08aa0'/%3E%3Crect x='18' y='11' width='1' height='1' fill='%23e08aa0'/%3E%3Crect x='4' y='12' width='1' height='1' fill='%23e08aa0'/%3E%3Crect x='5' y='12' width='1' height='1' fill='%23e08aa0'/%3E%3Crect x='6' y='12' width='1' height='1' fill='%23e08aa0'/%3E%3Crect x='7' y='12' width='1' height='1' fill='%239896bb'/%3E%3Crect x='8' y='12' width='1' height='1' fill='%239896bb'/%3E%3Crect x='9' y='12' width='1' height='1' fill='%235d6da5'/%3E%3Crect x='10' y='12' width='1' height='1' fill='%235d6da5'/%3E%3Crect x='11' y='12' width='1' height='1' fill='%235d6da5'/%3E%3Crect x='12' y='12' width='1' height='1' fill='%235d6da5'/%3E%3Crect x='13' y='12' width='1' height='1' fill='%235d6da5'/%3E%3Crect x='14' y='12' width='1' height='1' fill='%23e08aa0'/%3E%3Crect x='15' y='12' width='1' height='1' fill='%23e08aa0'/%3E%3Crect x='16' y='12' width='1' height='1' fill='%23e08aa0'/%3E%3Crect x='7' y='13' width='1' height='1' fill='%239896bb'/%3E%3Crect x='8' y='13' width='1' height='1' fill='%235d6da5'/%3E%3Crect x='9' y='13' width='1' height='1' fill='%235d6da5'/%3E%3Crect x='10' y='13' width='1' height='1' fill='%235d6da5'/%3E%3Crect x='11' y='13' width='1' height='1' fill='%235d6da5'/%3E%3Crect x='12' y='13' width='1' height='1' fill='%235d6da5'/%3E%3Crect x='13' y='13' width='1' height='1' fill='%235d6da5'/%3E%3Crect x='9' y='14' width='1' height='1' fill='%235d6da5'/%3E%3Crect x='10' y='14' width='1' height='1' fill='%235d6da5'/%3E%3Crect x='11' y='14' width='1' height='1' fill='%235d6da5'/%3E%3Crect x='17' y='15' width='1' height='1' fill='%23c8caee'/%3E%3Crect x='16' y='16' width='1' height='1' fill='%23c8caee'/%3E%3Crect x='17' y='16' width='1' height='1' fill='%23c8caee'/%3E%3Crect x='18' y='16' width='1' height='1' fill='%23c8caee'/%3E%3Crect x='17' y='17' width='1' height='1' fill='%23c8caee'/%3E%3C/svg%3E") 25px 68px / 84px 76px no-repeat,
linear-gradient(var(--faye-indigo), var(--faye-indigo)) 134px 20px / 2px calc(100% - 40px) no-repeat,
repeating-linear-gradient(to bottom, transparent 0 2px, rgba(93,109,165,0.10) 2px 3px) 2px 2px / calc(100% - 4px) calc(100% - 4px) no-repeat,
linear-gradient(var(--faye-panel-dark), var(--faye-panel-dark)) 2px 2px / calc(100% - 4px) calc(100% - 4px) no-repeat,
linear-gradient(var(--faye-lavender), var(--faye-lavender)) 0 0 / 100% 100% no-repeat !important;
}
/* ---- quote speech bubble: .bubble is display:contents, so its ::after is a grid item in the panel cell ---- */
[data-component="MinimalMessage"] > [class*="bubble" i]::after {
content: var(--faye-quote) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
position: relative !important;
grid-column: 3 !important;
grid-row: 2 !important;
align-self: start !important;
justify-self: center !important;
box-sizing: border-box !important;
width: 220px !important; height: 84px !important;
margin: 199px 10px 0 148px !important;
padding: 0 28px 9px 36px !important;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 19' preserveAspectRatio='none' shape-rendering='crispEdges'%3E%3Cpolygon points='5,1 49,1 49,2 50,2 50,17 49,17 49,18 5,18 5,17 4,17 4,2 5,2' fill='%23344979'/%3E%3Cpolygon points='4,0 48,0 48,1 49,1 49,16 48,16 48,17 4,17 4,16 3,16 3,1 4,1' fill='%23d86f8e'/%3E%3Cpolygon points='5,1 47,1 47,2 48,2 48,15 47,15 47,16 5,16 5,15 4,15 4,2 5,2' fill='%23ffffff'/%3E%3Cpolygon points='3,6 2,6 2,7 1,7 1,8 0,8 0,11 1,11 1,12 2,12 2,13 3,13' fill='%23d86f8e'/%3E%3Cg fill='%23d86f8e'%3E%3Crect x='6' y='2' width='2' height='2'/%3E%3Crect x='6' y='4' width='1' height='1'/%3E%3Crect x='9' y='2' width='2' height='2'/%3E%3Crect x='9' y='4' width='1' height='1'/%3E%3Crect x='41' y='13' width='2' height='2'/%3E%3Crect x='42' y='12' width='1' height='1'/%3E%3Crect x='44' y='13' width='2' height='2'/%3E%3Crect x='45' y='12' width='1' height='1'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat !important;
color: #d86f8e !important;
font-family: 'VT323', monospace !important;
font-size: 18px !important;
line-height: 20px !important;
letter-spacing: 1px !important;
text-align: center !important;
white-space: pre !important;
text-shadow: none !important;
z-index: 3 !important;
pointer-events: none !important;
}
[data-component="MinimalMessage"][data-part="user"] > [class*="bubble" i]::after {
grid-column: 1 !important;
padding: 0 36px 9px 28px !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 19' preserveAspectRatio='none' shape-rendering='crispEdges'%3E%3Cpolygon points='47,1 3,1 3,2 2,2 2,17 3,17 3,18 47,18 47,17 48,17 48,2 47,2' fill='%23344979'/%3E%3Cpolygon points='46,0 2,0 2,1 1,1 1,16 2,16 2,17 46,17 46,16 47,16 47,1 46,1' fill='%23d86f8e'/%3E%3Cpolygon points='45,1 3,1 3,2 2,2 2,15 3,15 3,16 45,16 45,15 46,15 46,2 45,2' fill='%23ffffff'/%3E%3Cpolygon points='47,6 48,6 48,7 49,7 49,8 50,8 50,11 49,11 49,12 48,12 48,13 47,13' fill='%23d86f8e'/%3E%3Cg fill='%23d86f8e'%3E%3Crect x='4' y='2' width='2' height='2'/%3E%3Crect x='4' y='4' width='1' height='1'/%3E%3Crect x='7' y='2' width='2' height='2'/%3E%3Crect x='7' y='4' width='1' height='1'/%3E%3Crect x='39' y='13' width='2' height='2'/%3E%3Crect x='40' y='12' width='1' height='1'/%3E%3Crect x='42' y='13' width='2' height='2'/%3E%3Crect x='43' y='12' width='1' height='1'/%3E%3C/g%3E%3C/svg%3E") !important;
}
/* ---- refresh + "system calibrating" bar (card::after) ---- */
[data-component="MinimalMessage"]:has([data-reasoning-toggle="true"])::after { content: "" !important; }
[data-component="MinimalMessage"]::after {
content: "LOADING..." !important;
display: block !important;
position: relative !important;
grid-column: 1 / -1 !important;
grid-row: 3 !important;
align-self: stretch !important;
box-sizing: border-box !important;
width: auto !important; height: auto !important;
left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
padding: 0 0 0 46px !important;
border: none !important;
color: var(--faye-pink) !important;
font-family: 'VT323', monospace !important;
font-size: 22px !important;
line-height: var(--bar-h) !important;
letter-spacing: 3px !important;
text-align: center !important;
white-space: nowrap !important;
overflow: hidden !important;
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 32' width='36' height='32' shape-rendering='crispEdges'%3E%3Crect x='1' y='1' width='34' height='30' fill='%231e2440' stroke='%239896bb' stroke-width='2'/%3E%3Cpath d='M12 11h9v2h2v2h-2v-2h-9v6h2v2h-4v-8z M24 21h-9v-2h-2v-2h2v2h9v-6h-2v-2h4v8z' fill='%23e08aa0'/%3E%3C/svg%3E") left center / 36px 32px no-repeat,
linear-gradient(var(--faye-panel-dark), var(--faye-panel-dark)) 48px center / calc(100% - 50px) 22px no-repeat,
linear-gradient(var(--faye-lavender), var(--faye-lavender)) 46px center / calc(100% - 46px) 26px no-repeat !important;
z-index: 2 !important;
pointer-events: none !important;
}
/* ---- the thinking block IS the calibrating bar: it sits on the track in row 3, its body drops down as a popup ---- */
html [data-component="MinimalMessage"] > [class*="bubble" i] > :has(> [data-reasoning-toggle="true"]) {
grid-column: 1 / -1 !important;
grid-row: 3 !important;
align-self: stretch !important;
position: static !important;
box-sizing: border-box !important;
height: var(--bar-h) !important;
margin: 0 0 0 49px !important;
padding: 0 !important;
background: none !important;
border: none !important;
box-shadow: none !important;
}
[data-component="MinimalMessage"] [data-reasoning-toggle="true"] {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
box-sizing: border-box !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 12px !important;
background: none !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
position: relative !important;
z-index: 6 !important;
color: var(--faye-pink) !important;
cursor: pointer !important;
}
[data-component="MinimalMessage"] [data-reasoning-toggle="true"] svg { width: 14px !important; height: 14px !important; flex: none !important; color: var(--faye-lavender) !important; stroke: currentColor !important; }
[data-component="MinimalMessage"] [data-reasoning-toggle="true"] svg:first-child { position: absolute !important; left: 10px !important; top: 50% !important; margin-top: -7px !important; }
[data-component="MinimalMessage"] [data-reasoning-toggle="true"] svg + svg { display: none !important; }
[data-component="MinimalMessage"] [data-reasoning-toggle="true"] [class*="label" i] { font-size: 0 !important; line-height: 0 !important; }
[data-component="MinimalMessage"] [data-reasoning-toggle="true"] [class*="label" i]::after {
content: "LOADING..." !important;
font-family: 'VT323', monospace !important;
display: block !important;
font-size: 22px !important;
line-height: 1 !important;
letter-spacing: 3px !important;
color: var(--faye-pink) !important;
}
[data-component="MinimalMessage"] [data-reasoning-toggle="true"]:hover [class*="label" i]::after { color: #ffffff !important; }
/* body = dropdown popup under the bar (closed = hidden) */
[data-component="MinimalMessage"] [class*="bodyWrapper" i]:not([class*="bodyWrapperOpen" i]) { display: none !important; }
[data-component="MinimalMessage"] [class*="bodyWrapperOpen" i] {
display: block !important;
position: absolute !important;
top: auto !important;
margin-top: 6px !important;
left: 14px !important; right: 14px !important;
z-index: 30 !important;
max-height: 320px !important;
overflow: auto !important;
box-sizing: border-box !important;
padding: 10px 14px !important;
background: var(--faye-panel-dark) !important;
border: 3px solid var(--faye-indigo) !important;
box-shadow: 4px 4px 0 rgba(10,13,28,0.85) !important;
color: var(--faye-text) !important;
font-size: 14px !important;
}
/* ---- message text window (row 4+) ---- */
[data-component="MinimalMessage"] [class*="bubble" i] > :not([class*="header" i]) {
grid-column: 1 / -1 !important;
margin: 14px -12px 0 !important;
min-width: 0 !important;
}
/* ---- visual-novel ADV text box: name plate tab, double border, ruled lines, pink arrow, quick menu ---- */
html [data-component="MinimalMessage"] [data-component="MessageContent"],
[data-theme-mode] [data-component="MinimalMessage"] [data-component="MessageContent"],
[data-theme-mode=dark] [data-component="MinimalMessage"] [data-component="MessageContent"] {
position: relative !important;
box-sizing: border-box !important;
width: auto !important;
max-width: none !important;
margin: 36px -12px 12px -12px !important;
padding: 24px 32px 8px !important;
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 4' shape-rendering='crispEdges'%3E%3Cpath fill='%23e08aa0' d='M0 0h7v1H6v1H5v1H4v1H3V3H2V2H1V1H0z'/%3E%3C/svg%3E") right 20px bottom 50px / 14px 8px no-repeat,
repeating-linear-gradient(to bottom, transparent 0 27px, rgba(152,150,187,0.08) 27px 28px),
rgba(17,22,38,0.95) !important;
border: 2px solid var(--faye-lavender) !important;
border-radius: 0 !important;
box-shadow: none !important;
}
html [data-component="MinimalMessage"] [data-component="MessageContent"]::before,
[data-theme-mode] [data-component="MinimalMessage"] [data-component="MessageContent"]::before,
[data-theme-mode=dark] [data-component="MinimalMessage"] [data-component="MessageContent"]::before {
content: "CHAR" !important;
display: block !important;
position: absolute !important;
top: -28px !important; left: 20px !important; right: auto !important;
height: auto !important;
z-index: 3 !important;
padding: 2px 22px !important;
background: var(--faye-tb-pink) !important;
border: 2px solid var(--faye-lavender) !important;
box-shadow: 2px 2px 0 rgba(10,13,28,0.85) !important;
color: #ffffff !important;
font-family: 'Pixelify Sans', monospace !important;
font-weight: 400 !important;
font-size: 22px !important;
line-height: 1.2 !important;
letter-spacing: 3px !important;
text-shadow: 1px 1px 0 rgba(52,73,121,0.85) !important;
}
html [data-component="MinimalMessage"][data-part="user"] [data-component="MessageContent"]::before,
[data-theme-mode] [data-component="MinimalMessage"][data-part="user"] [data-component="MessageContent"]::before,
[data-theme-mode=dark] [data-component="MinimalMessage"][data-part="user"] [data-component="MessageContent"]::before {
content: "USER" !important;
left: auto !important; right: 20px !important;
text-shadow: 1px 1px 0 rgba(52,73,121,0.85) !important;
}
/* the message header is a plain strip: no legacy ::before bar / ::after */
[data-component="MinimalMessage"] > [class*="bubble" i] > [class*="header" i]::before,
[data-component="MinimalMessage"] > [class*="bubble" i] > [class*="header" i]::after { content: none !important; display: none !important; }
/* ---- code blocks = mini Notepad popups ---- */
[data-component="MinimalMessage"] [class*="codeBlock" i] {
position: relative !important;
display: block !important;
margin: 12px 0 !important;
padding: 26px 0 0 !important;
overflow: hidden !important;
background: #e8e9fb !important;
border: 3px solid transparent !important;
border-image: var(--faye-tb-pink) 1 !important;
border-radius: 0 !important;
box-shadow: 4px 4px 0 rgba(20,30,80,0.7) !important;
}
[data-component="MinimalMessage"] [class*="codeBlock" i]::before {
content: "\2665 notes.txt - Notepad" !important;
display: block !important;
position: absolute !important;
top: 0 !important; left: 0 !important; right: 0 !important;
height: 26px !important;
padding: 0 80px 0 8px !important;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 66 18' width='66' height='18' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='20' height='18' fill='%239896bb'/%3E%3Crect x='0' y='0' width='20' height='1' fill='%23e8e9fb'/%3E%3Crect x='0' y='0' width='1' height='18' fill='%23e8e9fb'/%3E%3Crect x='0' y='17' width='20' height='1' fill='%23344979'/%3E%3Crect x='19' y='0' width='1' height='18' fill='%23344979'/%3E%3Crect x='6' y='12' width='8' height='2' fill='%230e1120'/%3E%3Crect x='23' y='0' width='20' height='18' fill='%239896bb'/%3E%3Crect x='23' y='0' width='20' height='1' fill='%23e8e9fb'/%3E%3Crect x='23' y='0' width='1' height='18' fill='%23e8e9fb'/%3E%3Crect x='23' y='17' width='20' height='1' fill='%23344979'/%3E%3Crect x='42' y='0' width='1' height='18' fill='%23344979'/%3E%3Cg fill='%230e1120'%3E%3Crect x='29' y='4' width='9' height='2'/%3E%3Crect x='29' y='11' width='9' height='2'/%3E%3Crect x='29' y='4' width='2' height='9'/%3E%3Crect x='36' y='4' width='2' height='9'/%3E%3C/g%3E%3Crect x='46' y='0' width='20' height='18' fill='%239896bb'/%3E%3Crect x='46' y='0' width='20' height='1' fill='%23e8e9fb'/%3E%3Crect x='46' y='0' width='1' height='18' fill='%23e8e9fb'/%3E%3Crect x='46' y='17' width='20' height='1' fill='%23344979'/%3E%3Crect x='65' y='0' width='1' height='18' fill='%23344979'/%3E%3Cpath d='M52 4L60 13M60 4L52 13' stroke='%230e1120' stroke-width='2' fill='none'/%3E%3C/svg%3E") right 6px center / 66px 18px no-repeat, var(--faye-tb-pink) !important;
border-bottom: 2px solid var(--faye-indigo) !important;
color: #ffffff !important;
font-family: 'VT323', monospace !important;
font-size: 17px !important;
line-height: 24px !important;
text-shadow: 1px 1px 0 rgba(52,73,121,0.5) !important;
white-space: nowrap !important;
box-sizing: border-box !important;
}
[data-component="MinimalMessage"] [class*="codeBlock" i]::after {
content: "Ln 1, Col 1 100% UTF-8" !important;
display: block !important;
padding: 2px 10px !important;
background: #c8caee !important;
border-top: 2px solid var(--faye-lavender) !important;
color: var(--faye-indigo) !important;
font-family: 'VT323', monospace !important;
font-size: 14px !important;
line-height: 16px !important;
white-space: pre !important;
}
[data-component="MinimalMessage"] [class*="codeHeader" i] {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: space-between !important;
gap: 10px !important;
height: auto !important;
width: auto !important;
margin: 0 !important;
padding: 2px 8px !important;
background: #c8caee !important;
border: none !important;
border-bottom: 2px solid var(--faye-lavender) !important;
border-radius: 0 !important;
box-shadow: none !important;
position: static !important;
}
[data-component="MinimalMessage"] [class*="codeHeader" i]::before,
[data-component="MinimalMessage"] [class*="codeHeader" i]::after { content: none !important; display: none !important; }
[data-component="MinimalMessage"] [class*="codeLang" i] {
color: var(--faye-indigo) !important;
font-family: 'VT323', monospace !important;
font-size: 16px !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
}
[data-component="MinimalMessage"] [class*="codeCopy" i] {
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
padding: 0 8px !important;
background: var(--faye-lavender) !important;
border: 2px solid !important;
border-color: #e8e9fb var(--faye-indigo) var(--faye-indigo) #e8e9fb !important;
border-radius: 0 !important;
color: var(--faye-panel-dark) !important;
font-family: 'VT323', monospace !important;
font-size: 15px !important;
opacity: 1 !important;
box-shadow: none !important;
}
[data-component="MinimalMessage"] [class*="codeBlock" i] pre {
margin: 0 !important;
padding: 10px 12px !important;
background: transparent !important;
border: none !important;
border-radius: 0 !important;
}
[data-component="MinimalMessage"] [class*="codeBlock" i] pre code,
[data-component="MinimalMessage"] [class*="codeBlock" i] pre code * {
color: var(--faye-panel) !important;
background: none !important;
font-family: 'VT323', monospace !important;
font-size: 17px !important;
line-height: 22px !important;
text-shadow: none !important;
}
[data-component="MinimalMessage"] [class*="codeBlock" i] pre code .hljs-section,
[data-component="MinimalMessage"] [class*="codeBlock" i] pre code .hljs-title,
[data-component="MinimalMessage"] [class*="codeBlock" i] pre code .hljs-attr,
[data-component="MinimalMessage"] [class*="codeBlock" i] pre code .hljs-keyword { color: var(--faye-periwinkle) !important; font-weight: 700 !important; }
/* ---- quick menu (decoration) inside the bottom of the text box ---- */
html [data-component="MinimalMessage"] [data-component="MessageContent"]::after,
[data-theme-mode] [data-component="MinimalMessage"] [data-component="MessageContent"]::after,
[data-theme-mode=dark] [data-component="MinimalMessage"] [data-component="MessageContent"]::after {
content: "Q.SAVE \2502 Q.LOAD \2502 SAVE \2502 LOAD \2502 AUTO \2502 SKIP \2502 LOG \2502 CONFIG" !important;
display: block !important;
margin: 12px -8px 0 !important;
padding: 6px 0 0 !important;
border-top: 2px dashed var(--faye-indigo) !important;
background: none !important;
box-shadow: none !important;
height: auto !important;
color: var(--faye-lavender) !important;
font-family: 'VT323', monospace !important;
font-size: 17px !important;
line-height: 24px !important;
letter-spacing: 1px !important;
text-align: center !important;
white-space: pre-wrap !important;
}
/* ---- phones: same console, smaller avatar so the stats + quote panel still fits ---- */
@media (max-width: 720px) {
[data-component="MinimalMessage"] {
--ic-w: 40px;
--scr-w: min(150px, 36vw);
--scr-h: calc(var(--scr-w) * 4 / 3);
--row-h: 232px;
--hdr-h: 54px;
--bar-h: 36px;
--shell-h: 366px;
--cut-x: 96px;
--cut-d: 26px;
--cut-y: 26px;
gap: 10px 8px !important;
padding: 12px 10px 0 !important;
}
[data-component="MinimalMessage"]::before,
[data-component="MinimalMessage"][data-part="user"]::before {
padding: 21px 6px 0 6px !important;
content: "AFFECTION\A \2588\2588\2588\2588\2588\2588\2588\2591\2591\2591 72%\A TRUST\A \2588\2588\2588\2588\2588\2591\2591\2591\2591\2591 50%\A ENERGY\A \2588\2588\2588\2591\2591\2591\2591\2591\2591\2591 30%" !important;
font-size: 15px !important;
line-height: 17px !important;
letter-spacing: 0 !important;
background:
repeating-linear-gradient(to bottom, transparent 0 2px, rgba(93,109,165,0.10) 2px 3px) 2px 2px / calc(100% - 4px) calc(100% - 4px) no-repeat,
linear-gradient(var(--faye-panel-dark), var(--faye-panel-dark)) 2px 2px / calc(100% - 4px) calc(100% - 4px) no-repeat,
linear-gradient(var(--faye-lavender), var(--faye-lavender)) 0 0 / 100% 100% no-repeat !important;
}
[data-component="MinimalMessage"][data-part="user"]::before {
background:
repeating-linear-gradient(to bottom, transparent 0 2px, rgba(93,109,165,0.10) 2px 3px) 2px 2px / calc(100% - 4px) calc(100% - 4px) no-repeat,
linear-gradient(var(--faye-panel-dark), var(--faye-panel-dark)) 2px 2px / calc(100% - 4px) calc(100% - 4px) no-repeat,
linear-gradient(var(--faye-lavender), var(--faye-lavender)) 0 0 / 100% 100% no-repeat !important;
}
[data-component="MinimalMessage"] > [class*="bubble" i]::after {
width: auto !important; height: 78px !important;
margin: 141px 6px 0 6px !important;
justify-self: stretch !important;
font-size: 16px !important; line-height: 18px !important; letter-spacing: 0 !important;
padding: 0 12px 8px 28px !important;
}
[data-component="MinimalMessage"][data-part="user"] > [class*="bubble" i]::after { padding: 0 28px 8px 12px !important; }
[data-component="MinimalMessage"] [class*="actionsWrap" i] button { width: 24px !important; height: 24px !important; }
[data-component="MinimalMessage"] [class*="actionsWrap" i] > div { gap: 3px !important; padding: 5px 0 !important; }
[data-theme-mode] [data-component="MinimalMessage"] > [class*="bubble" i] > [class*="header" i] > [class*="name" i],
[data-theme-mode=dark] [data-component="MinimalMessage"] > [class*="bubble" i] > [class*="header" i] > [class*="name" i],
[data-theme-mode] [data-component="MinimalMessage"][data-part="user"] > [class*="bubble" i] > [class*="header" i] > [class*="name" i],
[data-theme-mode=dark] [data-component="MinimalMessage"][data-part="user"] > [class*="bubble" i] > [class*="header" i] > [class*="name" i] {
font-size: 30px !important;
text-shadow: 2px 2px 0 var(--faye-pink), 4px 4px 0 var(--faye-indigo) !important;
}
/* phones: name on top, message # / date underneath, so neither is cut off */
html [data-component="MinimalMessage"] > [class*="bubble" i] > [class*="header" i] { flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; padding: 0 10px !important; gap: 0 !important; }
[data-component="MinimalMessage"] > [class*="bubble" i] > [class*="header" i] > [class*="metaPill" i] { margin: 0 !important; align-self: flex-start !important; font-size: 12px !important; line-height: 14px !important; max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; }
[data-theme-mode] [data-component="MinimalMessage"] > [class*="bubble" i] > [class*="header" i] > [class*="name" i],
[data-theme-mode=dark] [data-component="MinimalMessage"] > [class*="bubble" i] > [class*="header" i] > [class*="name" i] { font-size: 26px !important; line-height: 30px !important; max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; }
[data-component="MinimalMessage"] [class*="bubble" i] > :not([class*="header" i]) { margin-inline: -10px !important; }
html [data-component="MinimalMessage"] [data-component="MessageContent"],
[data-theme-mode] [data-component="MinimalMessage"] [data-component="MessageContent"],
[data-theme-mode=dark] [data-component="MinimalMessage"] [data-component="MessageContent"] { margin: 34px -10px 10px -10px !important; padding: 22px 16px 6px !important; background-position: right 10px bottom 46px, 0 0, 0 0 !important; }
html [data-component="MinimalMessage"] [data-component="MessageContent"]::after,
[data-theme-mode] [data-component="MinimalMessage"] [data-component="MessageContent"]::after,
[data-theme-mode=dark] [data-component="MinimalMessage"] [data-component="MessageContent"]::after {
content: "SAVE \2502 LOAD \2502 AUTO \2502 SKIP \2502 LOG" !important;
margin-inline: -4px !important;
}
}
/* ===================== CHAT PAGE: night-sky wallpaper + VN-style input dock ===================== */
html:has([data-component="ChatView"]),
html:has([data-component="ChatView"]) body {
background: url(assets/chat-wallpaper.png) center bottom / cover no-repeat fixed, var(--faye-bg) !important;
image-rendering: pixelated;
}
/* the dock = command window: double border, ruled lines, hard shadow */
html [data-component="InputArea"],
[data-theme-mode] [data-component="InputArea"],
[data-theme-mode=dark] [data-component="InputArea"] {
gap: 0 !important;
padding: 0 !important;
background:
repeating-linear-gradient(to bottom, transparent 0 27px, rgba(152,150,187,0.07) 27px 28px),
rgba(17,22,38,0.96) !important;
border: 4px solid var(--faye-lavender) !important;
border-radius: 0 !important;
box-shadow: 0 0 0 3px var(--faye-indigo), 6px 6px 0 3px rgba(10,13,28,0.85) !important;
backdrop-filter: none !important;
}
@media (max-width: 600px) {
html [data-component="InputArea"] { padding: 0 !important; left: 8px !important; right: 12px !important; bottom: 12px !important; }
}
/* menu row = the quick menu: VT323 caps, dashed rule under it */
[data-component="InputArea"] [class*="actionBar" i] {
background: none !important;
border: none !important;
border-bottom: 2px dashed var(--faye-indigo) !important;
padding: 4px 10px !important;
justify-content: center !important;
gap: 2px !important;
}
[data-component="InputArea"] [class*="actionBtn" i] {
color: var(--faye-lavender) !important;
font-family: 'VT323', monospace !important;
font-size: 17px !important;
letter-spacing: 1px !important;
text-transform: uppercase !important;
padding: 2px 8px !important;
border: 2px solid transparent !important;
}
[data-component="InputArea"] [class*="actionBtn" i]:hover,
[data-component="InputArea"] [class*="actionBtn" i][aria-expanded="true"],
[data-component="InputArea"] [class*="actionBtnActive" i] {
background: var(--faye-indigo) !important;
border-color: var(--faye-lavender) !important;
color: var(--faye-pink) !important;
}
[data-component="InputArea"] [class*="actionDivider" i] { width: 2px !important; height: 16px !important; background: var(--faye-indigo) !important; }
[data-component="InputArea"] [class*="badge" i] { background: var(--faye-pink) !important; color: var(--faye-panel-dark) !important; }
/* type field: dark screen with an indigo frame; prompt arrow in pink */
[data-component="InputArea"] [class*="inputRow" i] {
background: var(--faye-panel-dark) !important;
border: 3px solid var(--faye-indigo) !important;
box-shadow: inset 0 0 0 1px rgba(152,150,187,0.18) !important;
margin: 10px !important;
padding: 2px !important;
gap: 4px !important;
}
[data-component="InputArea"] textarea {
color: var(--faye-text) !important;
font-family: 'Pixelify Sans', monospace !important;
font-size: 15px !important;
line-height: 24px !important;
caret-color: var(--faye-pink) !important;
}
[data-component="InputArea"] [class*="inputWrapper" i]:has(textarea:placeholder-shown)::before {
content: "\25BC waiting for user input..." !important;
color: var(--faye-text-dim) !important;
font-family: 'VT323', monospace !important;
font-size: 18px !important;
top: 8px !important;
}
[data-component="InputArea"] [class*="inputRow" i]:focus-within { border-color: var(--faye-pink) !important; }
/* attach / mic / tools = flat bevelled keys; send = the pink gradient key */
[data-component="InputArea"] button[class*="attach" i],
[data-component="InputArea"] [class*="inputRow" i] button:not([class*="send" i]) {
background: var(--faye-panel) !important;
border: 2px solid !important;
border-color: var(--faye-lavender) var(--faye-border-dark) var(--faye-border-dark) var(--faye-lavender) !important;
border-radius: 0 !important;
color: var(--faye-lavender) !important;
}
[data-component="InputArea"] button[class*="attach" i]:hover,
[data-component="InputArea"] [class*="inputRow" i] button:not([class*="send" i]):hover { background: var(--faye-indigo) !important; color: #ffffff !important; }
[data-component="InputArea"] button[class*="send" i] {
background: var(--faye-tb-pink) !important;
border: 3px solid var(--faye-indigo) !important;
border-radius: 0 !important;
box-shadow: 3px 3px 0 rgba(10,13,28,0.85) !important;
color: #ffffff !important;
}
[data-component="InputArea"] button[class*="send" i]:hover { filter: brightness(1.12) !important; background: var(--faye-tb-pink) !important; color: #ffffff !important; }
[data-component="InputArea"] button[class*="send" i]:active { box-shadow: none !important; transform: translate(3px,3px) !important; }
[data-component="InputArea"] button[class*="send" i] svg { stroke: currentColor !important; }
/* popovers opened from the menu (persona, tools, extras, connections, quick…) = small dialog boxes */
[data-component="InputArea"] [class*="popoverSlot" i],
[data-component="InputArea"] [class*="popoverSlotInner" i],
[data-component="InputArea"] [class*="popover" i]:not([class*="popoverSlot" i]) {
background: var(--faye-panel-dark) !important;
border-radius: 0 !important;
color: var(--faye-text) !important;
font-family: 'Pixelify Sans', monospace !important;
}
[data-component="InputArea"] [class*="popover" i]:not([class*="popoverSlot" i]) {
border: 3px solid var(--faye-lavender) !important;
box-shadow: 0 0 0 3px var(--faye-indigo), 5px 5px 0 3px rgba(10,13,28,0.85) !important;
}
[data-component="InputArea"] [class*="popRowBtn" i],
[data-component="InputArea"] [class*="personaMain" i],
[data-component="InputArea"] [class*="quickSet" i] {
border-radius: 0 !important;
background: transparent !important;
color: var(--faye-text) !important;
}
[data-component="InputArea"] [class*="popRowBtn" i]:hover,
[data-component="InputArea"] [class*="quickSet" i]:hover { background: var(--faye-indigo) !important; color: #ffffff !important; }
[data-component="InputArea"] [class*="popRowBtnActive" i],
[data-component="InputArea"] [class*="popStateActive" i] { background: var(--faye-panel-alt) !important; color: var(--faye-pink) !important; }
[data-component="InputArea"] [class*="popDivider" i] { height: 0 !important; background: none !important; border-top: 2px dashed var(--faye-indigo) !important; }
[data-component="InputArea"] [class*="popMeta" i],
[data-component="InputArea"] [class*="popEmpty" i],
[data-component="InputArea"] [class*="addonPopoverHeader" i],
[data-component="InputArea"] [class*="personaGroupHeader" i] { color: var(--faye-text-dim) !important; font-family: 'VT323', monospace !important; font-size: 16px !important; letter-spacing: 1px !important; text-transform: uppercase !important; }
[data-component="InputArea"] [class*="personaSearch" i] input,
[data-component="InputArea"] [class*="customizeSearchField" i] input,
[data-component="InputArea"] [class*="addonCreateInput" i],
[data-component="InputArea"] [class*="addonCreateTextarea" i] {
background: var(--faye-bg) !important;
border: 2px solid var(--faye-indigo) !important;
border-radius: 0 !important;
color: var(--faye-text) !important;
font-family: 'Pixelify Sans', monospace !important;
}
/* ---------- minimal pass: the text box + send key are the focus, everything else is quiet icons ---------- */
html [data-component="InputArea"],
[data-theme-mode] [data-component="InputArea"],
[data-theme-mode=dark] [data-component="InputArea"] { padding: 6px 8px 8px !important; gap: 4px !important; }
@media (max-width: 600px) {
html [data-component="InputArea"] { padding: 4px 6px 6px !important; gap: 2px 4px !important; }
}
[data-component="InputArea"] [class*="actionBar" i] { border-bottom: none !important; padding: 0 !important; gap: 0 !important; }
[data-component="InputArea"] [class*="actionBtn" i] {
background: none !important;
border: none !important;
color: var(--faye-text-dim) !important;
padding: 4px 9px !important;
min-width: 0 !important;
}
[data-component="InputArea"] [class*="actionBtn" i] svg { width: 15px !important; height: 15px !important; }
[data-component="InputArea"] [class*="actionBtn" i]:hover,
[data-component="InputArea"] [class*="actionBtn" i][aria-expanded="true"],
[data-component="InputArea"] [class*="actionBtnActive" i] { background: none !important; border: none !important; color: var(--faye-pink) !important; }
[data-component="InputArea"] [class*="actionDivider" i] { display: none !important; }
[data-component="InputArea"] .ri-toolbar,
[data-component="InputArea"] #ri-toolbar { background: none !important; border: none !important; padding: 0 !important; gap: 0 !important; }
[data-component="InputArea"] .ri-icon-btn { color: var(--faye-text-dim) !important; padding: 4px 9px !important; }
[data-component="InputArea"] .ri-icon-btn:hover,
[data-component="InputArea"] .ri-icon-btn.ri-on { background: none !important; color: var(--faye-pink) !important; }
/* frame goes on the field itself, not the whole row (the row is flattened on phones) */
[data-component="InputArea"] [class*="inputRow" i] {
background: none !important;
border: none !important;
box-shadow: none !important;
margin: 2px 0 0 !important;
padding: 0 !important;
gap: 6px !important;
align-items: stretch !important;
}
[data-component="InputArea"] [class*="inputWrapper" i] {
box-sizing: border-box !important;
min-height: 56px !important;
padding: 6px 10px !important;
background: var(--faye-panel-dark) !important;
border: 3px solid var(--faye-indigo) !important;
box-shadow: inset 0 0 0 1px rgba(152,150,187,0.18) !important;
flex: 1 1 auto !important;
}
[data-component="InputArea"] [class*="inputWrapper" i]:focus-within { border-color: var(--faye-pink) !important; }
[data-component="InputArea"] [class*="inputWrapper" i]:has(textarea:placeholder-shown)::before { top: 14px !important; left: 14px !important; }
[data-component="InputArea"] textarea { padding: 0 !important; min-height: 40px !important; }
/* attach / mic: bare icons */
[data-component="InputArea"] button[class*="attach" i],
[data-component="InputArea"] [class*="inputRow" i] button:not([class*="send" i]) {
background: none !important;
border: none !important;
color: var(--faye-text-dim) !important;
}
[data-component="InputArea"] button[class*="attach" i]:hover,
[data-component="InputArea"] [class*="inputRow" i] button:not([class*="send" i]):hover { background: none !important; color: var(--faye-pink) !important; }
/* send: the big key */
[data-component="InputArea"] [class*="sendBtnShell" i] { align-self: stretch !important; display: flex !important; }
[data-component="InputArea"] button[class*="send" i] { min-width: 56px !important; min-height: 56px !important; height: 100% !important; }
[data-component="InputArea"] button[class*="send" i] svg { width: 22px !important; height: 22px !important; }
/* menus */
[data-component="InputArea"] [class*="popoverSlot" i],
[data-component="InputArea"] [class*="popoverSlotInner" i] { background: none !important; border: none !important; box-shadow: none !important; }
[data-component="InputArea"] [role="menu"],
[data-component="InputArea"] [role="listbox"] {
background: var(--faye-panel-dark) !important;
border: 3px solid var(--faye-lavender) !important;
border-radius: 0 !important;
box-shadow: 0 0 0 3px var(--faye-indigo), 5px 5px 0 3px rgba(10,13,28,0.85) !important;
}
/* ---------- Response Instructions + WFM panel = VN dialog window ---------- */
#ri-strip {
background: rgba(17,22,38,0.97) !important;
border: 3px solid var(--faye-lavender) !important;
border-radius: 0 !important;
box-shadow: 0 0 0 3px var(--faye-indigo), 5px 5px 0 3px rgba(10,13,28,0.85) !important;
overflow: visible !important;
}
#ri-strip-tabs {
background: var(--faye-tb-pink) !important;
border-bottom: 3px solid var(--faye-indigo) !important;
padding: 0 6px !important;
}
.ri-stab {
color: rgba(255,255,255,0.8) !important;
font-size: 18px !important;
letter-spacing: 1px !important;
text-transform: uppercase !important;
padding: 3px 12px !important;
text-shadow: 1px 1px 0 rgba(52,73,121,0.7) !important;
border-bottom: 3px solid transparent !important;
}
.ri-stab:hover { background: rgba(255,255,255,0.12) !important; color: #ffffff !important; }
.ri-stab.active { background: none !important; color: #ffffff !important; border-bottom: 3px solid #ffffff !important; }
#ri-strip-close { color: #ffffff !important; font-size: 20px !important; }
.ri-on-dot { border-radius: 0 !important; width: 8px !important; height: 8px !important; }
.ri-on-dot.on { background: var(--faye-pink) !important; }
.ri-spanel {
background:
repeating-linear-gradient(to bottom, transparent 0 27px, rgba(152,150,187,0.07) 27px 28px),
none !important;
padding: 12px 14px !important;
}
#ri-toggle, .ri-toggle {
background: var(--faye-panel) !important;
color: var(--faye-lavender) !important;
border: 2px solid !important;
border-color: var(--faye-lavender) var(--faye-border-dark) var(--faye-border-dark) var(--faye-lavender) !important;
box-shadow: none !important;
font-size: 16px !important;
padding: 1px 10px !important;
}
#ri-toggle.on, .ri-toggle.on { background: var(--faye-indigo) !important; color: var(--faye-pink) !important; }
.ri-textarea, #ri-textarea, #wfm-instruction, #wfm-draft {
background-color: var(--faye-panel-dark) !important;
border: 3px solid var(--faye-indigo) !important;
box-shadow: inset 0 0 0 1px rgba(152,150,187,0.18) !important;
font-size: 15px !important;
line-height: 25px !important;
color: var(--faye-text) !important;
caret-color: var(--faye-pink) !important;
}
.ri-textarea:focus, #ri-textarea:focus, #wfm-instruction:focus, #wfm-draft:focus { outline: none !important; border-color: var(--faye-pink) !important; }
.ri-textarea::placeholder, #ri-textarea::placeholder, #wfm-instruction::placeholder, #wfm-draft::placeholder { color: var(--faye-text-dim) !important; font-family: 'VT323', monospace !important; font-size: 17px !important; }
.wfm-btn {
background: var(--faye-panel) !important;
border: 2px solid !important;
border-color: var(--faye-lavender) var(--faye-border-dark) var(--faye-border-dark) var(--faye-lavender) !important;
box-shadow: none !important;
color: var(--faye-text) !important;
font-family: 'VT323', monospace !important;
font-size: 18px !important;
letter-spacing: 1px !important;
text-transform: uppercase !important;
padding: 2px 14px !important;
}
.wfm-btn:hover { background: var(--faye-indigo) !important; color: #ffffff !important; }
.wfm-btn.primary { background: var(--faye-tb-pink) !important; border: 3px solid var(--faye-indigo) !important; color: #ffffff !important; box-shadow: 3px 3px 0 rgba(10,13,28,0.85) !important; text-shadow: 1px 1px 0 rgba(52,73,121,0.7) !important; }
.wfm-btn.primary:hover { filter: brightness(1.12) !important; background: var(--faye-tb-pink) !important; }
.wfm-btn.primary:active { box-shadow: none !important; transform: translate(3px,3px) !important; }
#wfm-prev, #wfm-next { background: var(--faye-panel) !important; border: 2px solid var(--faye-indigo) !important; color: var(--faye-pink) !important; }
#wfm-counter, #wfm-loading { font-family: 'VT323', monospace !important; font-size: 17px !important; letter-spacing: 1px !important; color: var(--faye-text-dim) !important; text-transform: uppercase !important; }
.ri-preset-list, .ri-preset-save-row { background: var(--faye-panel-dark) !important; border-color: var(--faye-indigo) !important; border-width: 3px !important; }
.ri-preset-row { background: none !important; border-bottom: 2px dashed var(--faye-indigo) !important; }
.ri-preset-row:hover { background: var(--faye-indigo) !important; }
.ri-preset-name { font-size: 15px !important; }
.ri-preset-input { background: var(--faye-bg) !important; border: 2px solid var(--faye-indigo) !important; }
.ri-preset-input:focus { outline: none !important; border-color: var(--faye-pink) !important; }
#ri-float-btn { background: var(--faye-panel-dark) !important; border: 3px solid var(--faye-lavender) !important; box-shadow: 0 0 0 3px var(--faye-indigo), 4px 4px 0 3px rgba(10,13,28,0.85) !important; color: var(--faye-lavender) !important; }
#ri-float-btn:hover, #ri-float-btn.active { background: var(--faye-indigo) !important; color: var(--faye-pink) !important; }
/* ---------- quieter pass: no blue frame on the field, send = bare pink arrow ---------- */
[data-component="InputArea"] [class*="inputWrapper" i] {
background:
repeating-linear-gradient(to bottom, transparent 0 27px, rgba(152,150,187,0.07) 27px 28px),
rgba(10,13,28,0.55) !important;
border: none !important;
border-bottom: 2px dashed var(--faye-lavender) !important;
box-shadow: none !important;
}
[data-component="InputArea"] [class*="inputWrapper" i]:focus-within { border: none !important; border-bottom: 2px solid var(--faye-pink) !important; }
[data-component="InputArea"] [class*="inputRow" i]:focus-within { border: none !important; }
[data-component="InputArea"] button[class*="send" i] {
background: none !important;
border: none !important;
box-shadow: none !important;
color: var(--faye-pink) !important;
min-width: 48px !important;
filter: none !important;
}
[data-component="InputArea"] button[class*="send" i]:hover { background: none !important; color: #ffffff !important; filter: none !important; }
[data-component="InputArea"] button[class*="send" i]:active { transform: translateY(1px) !important; box-shadow: none !important; }
.ri-textarea, #ri-textarea, #wfm-instruction, #wfm-draft { border: none !important; border-bottom: 2px dashed var(--faye-lavender) !important; background-color: rgba(10,13,28,0.55) !important; box-shadow: none !important; }
.ri-textarea:focus, #ri-textarea:focus, #wfm-instruction:focus, #wfm-draft:focus { border: none !important; border-bottom: 2px solid var(--faye-pink) !important; }
/* ---------- v3: gradient frame, one small button size, saucepan buttons share the menu row ---------- */
html [data-component="InputArea"],
[data-theme-mode] [data-component="InputArea"],
[data-theme-mode=dark] [data-component="InputArea"] {
border: 4px solid transparent !important;
background:
repeating-linear-gradient(to bottom, transparent 0 27px, rgba(152,150,187,0.07) 27px 28px) padding-box,
linear-gradient(rgba(17,22,38,0.96), rgba(17,22,38,0.96)) padding-box,
linear-gradient(135deg, var(--faye-periwinkle-light) 0%, #4b4f8b 100%) border-box !important;
}
/* every button in the dock: same 30px square, same 15px icon */
[data-component="InputArea"] [class*="actionBtn" i],
[data-component="InputArea"] .ri-icon-btn,
[data-component="InputArea"] [class*="inputRow" i] button,
[data-component="InputArea"] button[class*="attach" i],
[data-component="InputArea"] button[class*="send" i],
[data-component="InputArea"] button[aria-label*="speech" i] {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
width: 30px !important; height: 30px !important;
min-width: 30px !important; min-height: 30px !important;
padding: 0 !important;
flex: none !important;
}
[data-component="InputArea"] [class*="actionBtn" i] svg,
[data-component="InputArea"] .ri-icon-btn svg,
[data-component="InputArea"] [class*="inputRow" i] button svg { width: 15px !important; height: 15px !important; }
[data-component="InputArea"] [class*="sendBtnShell" i] { align-self: end !important; }
[data-component="InputArea"] #ri-divider { display: none !important; }
[data-component="InputArea"] [class*="actionBar" i],
[data-component="InputArea"] #ri-toolbar { gap: 0 !important; }
[data-component="InputArea"] [class*="inputRow" i] { align-items: flex-end !important; }
@media (min-width: 721px) {
html [data-component="InputArea"] {
display: grid !important;
grid-template-columns: 1fr auto auto 1fr !important;
row-gap: 4px !important;
}
[data-component="InputArea"] > * { grid-column: 1 / -1; }
[data-component="InputArea"] > [class*="actionBar" i] { grid-column: 2 !important; grid-row: 1 !important; flex-wrap: nowrap !important; }
[data-component="InputArea"] > #ri-toolbar { grid-column: 3 !important; grid-row: 1 !important; margin: 0 !important; }
}
@media (max-width: 720px) {
html [data-component="InputArea"] {
grid-template-columns: auto auto 1fr auto auto auto !important;
grid-template-areas:
"actionbar actionbar actionbar actionbar actionbar actionbar"
"exttoolbar exttoolbar exttoolbar exttoolbar exttoolbar exttoolbar"
"popover popover popover popover popover popover"
"ripanel ripanel ripanel ripanel ripanel ripanel"
"field field field field field send"
"attach mic . ri wfm tpl" !important;
gap: 2px 4px !important;
}
}
/* ---------- swipe indicator = visual-novel choice button ---------- */
[data-component="SwipeControls"] {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 10px !important;
box-sizing: border-box !important;
width: min(260px, 70%) !important;
margin: 4px auto 18px !important;
padding: 4px 8px !important;
background: rgba(17,22,38,0.95) !important;
border: 3px solid var(--faye-lavender) !important;
border-radius: 0 !important;
box-shadow: 0 0 0 3px var(--faye-indigo), 5px 5px 0 3px rgba(10,13,28,0.85) !important;
}
[data-component="SwipeControls"]:hover { background: var(--faye-panel-alt) !important; }
[data-component="SwipeControls"] [class*="btn" i] {
width: 26px !important; height: 26px !important;
background: none !important;
border: none !important;
border-radius: 0 !important;
color: var(--faye-pink) !important;
}
[data-component="SwipeControls"] [class*="btn" i]:hover:not(:disabled) { color: #ffffff !important; background: var(--faye-indigo) !important; }
[data-component="SwipeControls"] [class*="btn" i]:disabled { opacity: 0.3 !important; }
[data-component="SwipeControls"] [class*="counter" i] {
flex: 1 !important;
text-align: center !important;
color: var(--faye-text) !important;
font-family: 'VT323', monospace !important;
font-size: 20px !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
}
/* ---------- drawer edge tabs (main dock + character profile dock) = browser tabs ---------- */
[class*="drawerTab" i]:not([class*="drawerTabs" i]) {
background: var(--faye-panel-dark) !important;
border: 3px solid var(--faye-indigo) !important;
color: var(--faye-text-dim) !important;
box-shadow: none !important;
padding: 14px 6px 18px !important;
}
[class*="wrapperRight" i] [class*="drawerTab" i] {
border-right: none !important;
border-radius: 0 !important;
clip-path: polygon(0 12px, 12px 0, 100% 0, 100% 100%, 12px 100%, 0 calc(100% - 12px)) !important;
}
[class*="wrapperLeft" i] [class*="drawerTab" i] {
border-left: none !important;
border-radius: 0 !important;
clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%) !important;
}
[class*="drawerTab" i]:hover { background: var(--faye-panel-alt) !important; color: var(--faye-text) !important; }
html [class*="drawerTab" i][class*="drawerTabActive" i], html [class*="wrapperOpen" i] [class*="drawerTab" i] {
background: linear-gradient(135deg, var(--faye-periwinkle-light) 0%, #4b4f8b 100%) !important;
border-color: var(--faye-lavender) !important;
color: #ffffff !important;
}
[class*="drawerTab" i] [class*="tabIconBox" i] { color: inherit !important; }
/* ---------- v4 ---------- */
/* dock: thin blue->pink gradient frame */
html [data-component="InputArea"],
[data-theme-mode] [data-component="InputArea"],
[data-theme-mode=dark] [data-component="InputArea"] {
border: 2px solid transparent !important;
box-shadow: 4px 4px 0 rgba(10,13,28,0.85) !important;
background:
repeating-linear-gradient(to bottom, transparent 0 27px, rgba(152,150,187,0.07) 27px 28px) padding-box,
linear-gradient(rgba(17,22,38,0.96), rgba(17,22,38,0.96)) padding-box,
var(--faye-tb-pink) border-box !important;
}
/* menu left, saucepan buttons right (desktop) */
@media (min-width: 721px) {
html [data-component="InputArea"] { grid-template-columns: 1fr auto !important; }
[data-component="InputArea"] > [class*="actionBar" i] { grid-column: 1 !important; justify-self: start !important; }
[data-component="InputArea"] > #ri-toolbar { grid-column: 2 !important; justify-self: end !important; }
}
/* attach / mic / send centred on the type box */
[data-component="InputArea"] [class*="inputRow" i] { align-items: center !important; }
[data-component="InputArea"] [class*="sendBtnShell" i] { align-self: center !important; }
[data-component="InputArea"] button[aria-label="Attach file" i],
[data-component="InputArea"] button[aria-label*="speech-to-text" i] { align-self: center !important; }
/* top bar of the chat: full width on desktop, blue->pink, with the quote */
[data-component="ChatView"] [class*="chatToolbar" i] {
background: var(--faye-tb-pink) !important;
border: none !important;
position: relative !important;
}
[data-component="ChatView"] [class*="chatToolbar" i]::before {
content: "“sic mundus creatus est,”";
font-style: italic;
position: absolute;
left: 14px; top: 50%;
transform: translateY(-50%);
color: #ffffff;
font-family: 'VT323', monospace;
font-size: 20px;
letter-spacing: 2px;
text-shadow: 2px 2px 0 rgba(52,73,121,0.7);
white-space: nowrap;
pointer-events: none;
}
@media (min-width: 721px) {
[data-component="ChatView"] [class*="chatToolbar" i] {
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
box-sizing: border-box !important;
}
[data-component="ChatView"] [class*="chatToolbar" i]::before { left: 50%; transform: translate(-50%, -50%); font-size: 22px; }
}
/* portrait tab: browser-tab shape too, and parked above the drawer tab so they don't overlap */
[class*="portraitTab" i]:not([class*="portraitTabs" i]) {
background: var(--faye-panel-dark) !important;
border: 3px solid var(--faye-indigo) !important;
color: var(--faye-text-dim) !important;
border-radius: 0 !important;
align-self: flex-start !important;
margin-top: calc(48vh - 120px) !important;
}
[class*="portraitTabRight" i] {
border-right: none !important;
clip-path: polygon(0 12px, 12px 0, 100% 0, 100% 100%, 12px 100%, 0 calc(100% - 12px)) !important;
}
[class*="portraitTabLeft" i] {
border-left: none !important;
clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%) !important;
}
[class*="portraitTab" i]:hover { background: var(--faye-panel-alt) !important; color: var(--faye-text) !important; }
html [class*="portraitTab" i][class*="portraitTabActive" i] {
background: linear-gradient(135deg, var(--faye-periwinkle-light) 0%, #4b4f8b 100%) !important;
border-color: var(--faye-lavender) !important;
color: #ffffff !important;
}
/* switches (response-instructions enable etc): pixel track, visible when ON */
button[role="switch"] {
border: none !important;
border-radius: 0 !important;
background: var(--faye-panel-dark) !important;
box-shadow: inset 0 0 0 2px var(--faye-lavender) !important;
}
button[role="switch"]::after { border-radius: 0 !important; background: var(--faye-lavender) !important; }
button[role="switch"][aria-checked="true"] { background: var(--faye-tb-pink) !important; box-shadow: inset 0 0 0 2px var(--faye-indigo) !important; }
button[role="switch"][aria-checked="true"]::after { background: #ffffff !important; }
/* ---------- v5: boxy tabs, small swipe box, BookWorm + response-instructions skin ---------- */
[class*="wrapperRight" i], [class*="wrapperLeft" i] { --drawer-tab-w: 32px !important; }
[class*="drawerTab" i]:not([class*="drawerTabs" i]),
[class*="portraitTab" i]:not([class*="portraitTabs" i]) {
clip-path: none !important;
border-radius: 0 !important;
width: 32px !important; min-width: 32px !important;
height: 48px !important; min-height: 48px !important;
padding: 0 !important; gap: 0 !important;
align-items: center !important; justify-content: center !important;
}
[class*="wrapperRight" i] [class*="drawerTab" i], [class*="portraitTabRight" i] { border-right: none !important; }
[class*="wrapperLeft" i] [class*="drawerTab" i], [class*="portraitTabLeft" i] { border-left: none !important; }
[data-component="SwipeControls"] {
width: min(150px, 46%) !important;
padding: 1px 4px !important;
gap: 4px !important;
margin: 2px auto 14px !important;
border: 2px solid var(--faye-lavender) !important;
box-shadow: none !important;
}
[data-component="SwipeControls"] [class*="btn" i] { width: 22px !important; height: 22px !important; }
[data-component="SwipeControls"] [class*="counter" i] { font-size: 18px !important; letter-spacing: 1px !important; }
/* ---- response instructions (saucepan) panel ---- */
#ri-panel .ri-header { display: flex !important; align-items: center !important; gap: 8px !important; padding: 4px 8px !important; border-bottom: 2px dashed var(--faye-indigo) !important; }
#ri-panel .ri-header-title { font-family: 'VT323', monospace !important; font-size: 19px !important; letter-spacing: 2px !important; text-transform: uppercase !important; color: var(--faye-pink) !important; }
#ri-panel .ri-header-icon { color: var(--faye-lavender) !important; }
#ri-panel .ri-hbtn { width: 26px !important; height: 26px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; background: none !important; border: none !important; border-radius: 0 !important; color: var(--faye-text-dim) !important; }
#ri-panel .ri-hbtn:hover { color: var(--faye-pink) !important; background: none !important; }
#ri-panel button[class*="tab" i] { font-family: 'VT323', monospace !important; font-size: 17px !important; letter-spacing: 1px !important; text-transform: uppercase !important; background: none !important; border: none !important; border-radius: 0 !important; color: var(--faye-text-dim) !important; border-bottom: 2px solid transparent !important; }
#ri-panel button[class*="tab" i][class*="active" i], #ri-panel button[class*="tab" i][aria-selected="true"] { color: var(--faye-pink) !important; border-bottom-color: var(--faye-pink) !important; }
#ri-panel .ri-toggle-track { border-radius: 0 !important; background: var(--faye-panel-dark) !important; box-shadow: inset 0 0 0 2px var(--faye-lavender) !important; border: none !important; }
#ri-panel .ri-toggle-thumb { border-radius: 0 !important; background: var(--faye-lavender) !important; }
#ri-panel .ri-toggle input:checked + .ri-toggle-track { background: var(--faye-tb-pink) !important; box-shadow: inset 0 0 0 2px var(--faye-indigo) !important; }
#ri-panel .ri-toggle input:checked ~ .ri-toggle-thumb { background: #ffffff !important; }
/* ---- BookWorm (extension): widget sits right on the dock border ---- */
#bw-corner-widget { top: auto !important; bottom: calc(100% + 2px) !important; right: 28px !important; }
#bw-corner-widget:hover { transform: none !important; }
#bw-corner-widget:focus-visible { outline: 2px solid var(--faye-pink) !important; border-radius: 0 !important; }
/* BookWorm window = VN dialog: double border, pixel title bar, flat keys */
#bw-popup-window,
#bw-popup-window[data-theme=dark],
#bw-selection-helper,
#bw-selection-helper[data-theme=dark] {
--bw-forest: var(--faye-panel-dark); --bw-deep: var(--faye-bg); --bw-gold: var(--faye-pink);
--bw-paper: var(--faye-panel-dark); --bw-ink: var(--faye-text); --bw-muted: var(--faye-text-dim);
--bw-line: var(--faye-indigo); --bw-accent: var(--faye-pink);
color-scheme: dark !important;
background: var(--faye-panel-dark) !important;
color: var(--faye-text) !important;
border: 4px solid var(--faye-lavender) !important;
border-radius: 0 !important;
box-shadow: 0 0 0 3px var(--faye-indigo), 6px 6px 0 3px rgba(10,13,28,0.85) !important;
animation: none !important;
font-family: 'Pixelify Sans', monospace !important;
}
#bw-popup-window *, #bw-selection-helper * { border-radius: 0 !important; }
#bw-popup-window .bw-header { background: var(--faye-tb-pink) !important; border-bottom: 3px solid var(--faye-indigo) !important; min-height: 56px !important; padding: 8px 18px !important; }
#bw-popup-window .bw-brand h1 { font-family: 'Pixelify Sans', monospace !important; font-weight: 700 !important; font-size: 26px !important; letter-spacing: 1px !important; color: #ffffff !important; text-shadow: 2px 2px 0 rgba(52,73,121,0.8) !important; }
#bw-popup-window .bw-edition { font-family: 'VT323', monospace !important; font-size: 15px !important; letter-spacing: 2px !important; color: rgba(255,255,255,0.85) !important; }
#bw-popup-window .bw-seal { border: 2px solid #ffffff !important; color: #ffffff !important; }
#bw-popup-window .bw-icon-btn { color: #ffffff !important; background: none !important; border: 2px solid transparent !important; }
#bw-popup-window .bw-icon-btn:hover, #bw-popup-window .bw-icon-btn[aria-expanded=true] { background: rgba(255,255,255,0.18) !important; border-color: #ffffff !important; }
#bw-popup-window .bw-left { background: var(--faye-panel) !important; border-right: 3px solid var(--faye-indigo) !important; color: var(--faye-text) !important; }
#bw-popup-window .bw-eyebrow { font-family: 'VT323', monospace !important; font-size: 15px !important; letter-spacing: 2px !important; color: var(--faye-text-dim) !important; }
#bw-popup-window .bw-tab { font-family: 'VT323', monospace !important; text-transform: uppercase !important; background: none !important; border: 2px solid transparent !important; color: var(--faye-text-dim) !important; }
#bw-popup-window .bw-tab span { font-size: 17px !important; letter-spacing: 1px !important; font-weight: 400 !important; }
#bw-popup-window .bw-tab:hover { background: var(--faye-indigo) !important; color: #ffffff !important; }
#bw-popup-window .bw-tab[aria-selected=true] { background: var(--faye-panel-dark) !important; border-color: var(--faye-pink) !important; color: var(--faye-pink) !important; box-shadow: none !important; }
#bw-popup-window .bw-tab[aria-selected=true] small, #bw-popup-window .bw-tab small { color: var(--faye-lavender) !important; font-family: 'VT323', monospace !important; }
#bw-popup-window .bw-tab .bw-tab-dot { background: var(--faye-pink) !important; border-radius: 0 !important; }
#bw-popup-window .bw-buggy-name { font-family: 'VT323', monospace !important; font-size: 16px !important; color: var(--faye-pink) !important; }
#bw-popup-window .bw-buggy-line { font-family: 'Pixelify Sans', monospace !important; font-style: normal !important; font-size: 13px !important; color: var(--faye-text) !important; }
#bw-popup-window .bw-leaf-note { color: var(--faye-text-dim) !important; font-family: 'VT323', monospace !important; font-size: 14px !important; }
#bw-popup-window .bw-page, #bw-popup-window[data-theme=dark] .bw-page {
background:
repeating-linear-gradient(to bottom, transparent 0 27px, rgba(152,150,187,0.07) 27px 28px),
var(--faye-panel-dark) !important;
}
#bw-popup-window .bw-page::after, #bw-popup-window[data-theme=dark] .bw-page::after { display: none !important; }
#bw-popup-window .bw-page-title { font-family: 'Pixelify Sans', monospace !important; font-weight: 700 !important; font-size: 28px !important; letter-spacing: 0 !important; color: var(--faye-text) !important; text-shadow: 2px 2px 0 var(--faye-indigo) !important; }
#bw-popup-window .bw-badge, #bw-popup-window[data-theme=dark] .bw-badge { font-family: 'VT323', monospace !important; font-size: 15px !important; background: var(--faye-panel) !important; border: 2px solid var(--faye-indigo) !important; color: var(--faye-pink) !important; }
#bw-popup-window .bw-badge::before { border-radius: 0 !important; }
#bw-popup-window .bw-description, #bw-popup-window .bw-query-label, #bw-popup-window .bw-query-meta, #bw-popup-window .bw-footer, #bw-popup-window .bw-loading,
#bw-popup-window[data-theme=dark] .bw-query-label, #bw-popup-window[data-theme=dark] .bw-query-meta, #bw-popup-window[data-theme=dark] .bw-footer, #bw-popup-window[data-theme=dark] .bw-loading { color: var(--faye-text-dim) !important; font-family: 'VT323', monospace !important; font-size: 16px !important; letter-spacing: 1px !important; }
#bw-popup-window .bw-input-shell, #bw-popup-window[data-theme=dark] .bw-input-shell { background: rgba(10,13,28,0.55) !important; border: none !important; border-bottom: 2px dashed var(--faye-lavender) !important; box-shadow: none !important; }
#bw-popup-window .bw-input-shell:focus-within, #bw-popup-window[data-theme=dark] .bw-input-shell:focus-within { border-bottom: 2px solid var(--faye-pink) !important; box-shadow: none !important; }
#bw-popup-window #bw-query-input, #bw-popup-window[data-theme=dark] #bw-query-input { color: var(--faye-text) !important; font-family: 'Pixelify Sans', monospace !important; caret-color: var(--faye-pink) !important; }
#bw-popup-window #bw-query-input::placeholder, #bw-popup-window[data-theme=dark] #bw-query-input::placeholder { color: var(--faye-text-dim) !important; font-family: 'VT323', monospace !important; font-size: 17px !important; }
#bw-popup-window .bw-primary, #bw-popup-window[data-theme=dark] .bw-primary { background: var(--faye-tb-pink) !important; color: #ffffff !important; border: 3px solid var(--faye-indigo) !important; font-family: 'VT323', monospace !important; font-size: 18px !important; letter-spacing: 1px !important; text-transform: uppercase !important; font-weight: 400 !important; text-shadow: 1px 1px 0 rgba(52,73,121,0.8) !important; box-shadow: 3px 3px 0 rgba(10,13,28,0.85) !important; }
#bw-popup-window .bw-primary:hover, #bw-popup-window[data-theme=dark] .bw-primary:hover { background: var(--faye-tb-pink) !important; filter: brightness(1.12) !important; }
#bw-popup-window .bw-welcome, #bw-popup-window .bw-result-heading { border-top: 2px dashed var(--faye-indigo) !important; }
#bw-popup-window .bw-welcome-mark { color: var(--faye-pink) !important; font-family: 'Pixelify Sans', monospace !important; }
#bw-popup-window .bw-welcome h3, #bw-popup-window .bw-result-heading h3, #bw-popup-window .bw-output .bw-md-heading, #bw-popup-window[data-theme=dark] .bw-output .bw-md-heading { font-family: 'Pixelify Sans', monospace !important; color: var(--faye-text) !important; }
#bw-popup-window .bw-welcome p, #bw-popup-window[data-theme=dark] .bw-welcome p, #bw-popup-window .bw-output, #bw-popup-window .bw-definition { font-family: 'Pixelify Sans', monospace !important; color: var(--faye-text) !important; font-size: 14px !important; }
#bw-popup-window .bw-word, #bw-popup-window[data-theme=dark] .bw-word { font-family: 'VT323', monospace !important; font-size: 16px !important; background: var(--faye-panel) !important; color: var(--faye-text) !important; border: 2px solid !important; border-color: var(--faye-lavender) var(--faye-border-dark) var(--faye-border-dark) var(--faye-lavender) !important; }
#bw-popup-window .bw-word:hover, #bw-popup-window[data-theme=dark] .bw-word:hover { background: var(--faye-indigo) !important; color: var(--faye-pink) !important; }
#bw-popup-window .bw-sense, #bw-popup-window .bw-history-item, #bw-popup-window[data-theme=dark] .bw-sense, #bw-popup-window[data-theme=dark] .bw-history-item { border-color: var(--faye-indigo) !important; border-bottom-style: dashed !important; color: var(--faye-text) !important; }
#bw-popup-window .bw-sense-label, #bw-popup-window .bw-relations-label, #bw-popup-window[data-theme=dark] .bw-sense-label, #bw-popup-window[data-theme=dark] .bw-relations-label { font-family: 'VT323', monospace !important; font-size: 15px !important; color: var(--faye-lavender) !important; }
#bw-popup-window .bw-sense-number, #bw-popup-window[data-theme=dark] .bw-sense-number { color: var(--faye-pink) !important; font-family: 'VT323', monospace !important; }
#bw-popup-window .bw-example, #bw-popup-window .bw-md-quote, #bw-popup-window[data-theme=dark] .bw-example, #bw-popup-window[data-theme=dark] .bw-md-quote { border-left: 3px solid var(--faye-pink) !important; color: var(--faye-text-dim) !important; font-style: normal !important; font-family: 'Pixelify Sans', monospace !important; }
#bw-popup-window .bw-footer a, #bw-popup-window .bw-action, #bw-popup-window[data-theme=dark] .bw-footer a, #bw-popup-window[data-theme=dark] .bw-action { color: var(--faye-pink) !important; font-family: 'VT323', monospace !important; font-size: 16px !important; }
#bw-popup-window .bw-notice, #bw-popup-window[data-theme=dark] .bw-notice { background: var(--faye-panel) !important; border: 2px solid var(--faye-pink) !important; color: var(--faye-text) !important; font-family: 'Pixelify Sans', monospace !important; }
#bw-popup-window .bw-popover, #bw-popup-window[data-theme=dark] .bw-popover { background: var(--faye-panel-dark) !important; border: 3px solid var(--faye-lavender) !important; box-shadow: 0 0 0 3px var(--faye-indigo), 5px 5px 0 3px rgba(10,13,28,0.85) !important; color: var(--faye-text) !important; }
#bw-popup-window .bw-popover h2 { font-family: 'Pixelify Sans', monospace !important; color: var(--faye-text) !important; }
#bw-popup-window .bw-popover select, #bw-popup-window .bw-popover input, #bw-popup-window[data-theme=dark] .bw-popover input, #bw-selection-helper input, #bw-popup-window .bw-web-panel input { background: var(--faye-bg) !important; color: var(--faye-text) !important; border: 2px solid var(--faye-indigo) !important; font-family: 'Pixelify Sans', monospace !important; }
#bw-popup-window .bw-md-inline-code, #bw-popup-window[data-theme=dark] .bw-md-inline-code { background: var(--faye-indigo) !important; color: var(--faye-text) !important; font-family: 'VT323', monospace !important; font-size: 15px !important; }
#bw-popup-window .bw-md-code-block, #bw-popup-window[data-theme=dark] .bw-md-code-block { background: var(--faye-bg) !important; border: 2px solid var(--faye-indigo) !important; color: var(--faye-text) !important; font-family: 'VT323', monospace !important; }
#bw-popup-window .bw-web-panel { border: 2px solid var(--faye-indigo) !important; }
#bw-popup-window :focus-visible, #bw-selection-helper :focus-visible { outline: 2px solid var(--faye-pink) !important; }
#bw-popup-window .bw-output-scroll { scrollbar-color: var(--faye-lavender) transparent !important; }
/* selection helper (floating note) */
#bw-selection-helper .bw-selected { font-family: 'Pixelify Sans', monospace !important; font-style: normal !important; border-left: 3px solid var(--faye-pink) !important; }
#bw-selection-helper button { background: var(--faye-panel) !important; color: var(--faye-text) !important; border: 2px solid !important; border-color: var(--faye-lavender) var(--faye-border-dark) var(--faye-border-dark) var(--faye-lavender) !important; font-family: 'VT323', monospace !important; font-size: 17px !important; text-transform: uppercase !important; letter-spacing: 1px !important; }
#bw-selection-helper button:hover { background: var(--faye-indigo) !important; color: var(--faye-pink) !important; }
#bw-selection-helper header, #bw-selection-helper .bw-help-form, #bw-selection-helper .bw-help-result section { border-color: var(--faye-indigo) !important; border-style: dashed !important; }
#bw-selection-helper a { color: var(--faye-pink) !important; }
@media (max-width: 720px) {
[data-component="ChatView"] [class*="chatToolbar" i]::before { font-size: 15px; letter-spacing: 1px; }
}
/* ---------- v6: Saucepan Seasoning panel = dark Notepad window ---------- */
#ri-panel { transition: none !important; background: var(--faye-panel-dark) !important; border: 3px solid var(--faye-indigo) !important; border-radius: 0 !important; box-shadow: 4px 4px 0 rgba(10,13,28,0.85) !important; margin: 6px 4px 8px !important; }
#ri-panel:not(.ri-open) { border-width: 0 !important; box-shadow: none !important; margin: 0 !important; }
#ri-panel .ri-header, #ri-panel .ri-lib-header {
background: var(--faye-tb-pink) !important;
border-bottom: 2px solid var(--faye-indigo) !important;
padding: 3px 8px !important;
gap: 6px !important;
color: #ffffff !important;
}
#ri-panel .ri-header-title, #ri-panel .ri-lib-header-title { font-family: 'VT323', monospace !important; font-size: 18px !important; letter-spacing: 1px !important; text-transform: none !important; color: #ffffff !important; text-shadow: 1px 1px 0 rgba(52,73,121,0.7) !important; }
#ri-panel .ri-header-title::after { content: " - Notepad"; }
#ri-panel .ri-header-icon { color: #ffffff !important; opacity: 1 !important; }
#ri-panel .ri-hbtn { color: #ffffff !important; }
#ri-panel .ri-hbtn:hover { background: rgba(255,255,255,0.2) !important; color: #ffffff !important; }
#ri-panel .ri-hbtn.ri-on { color: #ffffff !important; background: rgba(255,255,255,0.25) !important; }
/* menu bar */
#ri-panel .ri-mode-tabs, #ri-panel .ri-wfm-tabs { background: var(--faye-panel) !important; border-bottom: 2px solid var(--faye-indigo) !important; padding: 0 8px !important; gap: 0 !important; }
#ri-panel .ri-mode-tab, #ri-panel .ri-wfm-tab { font-family: 'VT323', monospace !important; font-size: 17px !important; letter-spacing: 1px !important; border: none !important; border-radius: 0 !important; background: none !important; color: var(--faye-text-dim) !important; padding: 1px 12px !important; }
#ri-panel .ri-mode-tab:hover, #ri-panel .ri-wfm-tab:hover { background: var(--faye-indigo) !important; color: #ffffff !important; }
#ri-panel .ri-mode-tab.ri-on, #ri-panel .ri-wfm-tab.ri-on { background: var(--faye-panel-dark) !important; color: var(--faye-pink) !important; box-shadow: inset 0 -2px 0 var(--faye-pink) !important; }
/* page */
#ri-panel .ri-body, #ri-panel .ri-simple-body, #ri-panel .ri-lib-body {
background: repeating-linear-gradient(to bottom, transparent 0 27px, rgba(152,150,187,0.07) 27px 28px), var(--faye-panel-dark) !important;
padding: 10px 12px !important;
}
#ri-panel .ri-ta, #ri-panel .ri-simple-ta, #ri-panel .ri-lib-name-input, #ri-panel #ri-preset-select {
background: rgba(10,13,28,0.55) !important;
border: none !important;
border-bottom: 2px dashed var(--faye-lavender) !important;
border-radius: 0 !important;
color: var(--faye-text) !important;
font-family: 'Pixelify Sans', monospace !important;
font-size: 14px !important;
line-height: 22px !important;
caret-color: var(--faye-pink) !important;
}
#ri-panel .ri-ta:focus, #ri-panel .ri-simple-ta:focus, #ri-panel .ri-lib-name-input:focus, #ri-panel #ri-preset-select:focus { border-bottom: 2px solid var(--faye-pink) !important; outline: none !important; }
#ri-panel .ri-label, #ri-panel .ri-field-label { font-family: 'VT323', monospace !important; font-size: 15px !important; letter-spacing: 1px !important; color: var(--faye-lavender) !important; font-weight: 400 !important; }
#ri-panel .ri-preview, #ri-panel .ri-draft-box, #ri-panel .ri-saved-item, #ri-panel .ri-lib-item { background: var(--faye-panel) !important; border: 2px dashed var(--faye-indigo) !important; border-radius: 0 !important; color: var(--faye-text) !important; font-family: 'Pixelify Sans', monospace !important; font-size: 13px !important; }
#ri-panel .ri-lib-item-name { font-family: 'VT323', monospace !important; font-size: 17px !important; color: var(--faye-pink) !important; font-weight: 400 !important; }
#ri-panel .ri-lib-item-preview, #ri-panel .ri-help-text, #ri-panel .ri-empty, #ri-panel .ri-lib-empty, #ri-panel .ri-composed-preview, #ri-panel .ri-wfm-option-label { color: var(--faye-text-dim) !important; font-family: 'Pixelify Sans', monospace !important; font-style: normal !important; }
#ri-panel .ri-btn, #ri-panel .ri-lib-save-btn, #ri-panel .ri-saved-act, #ri-panel .ri-lib-act {
border-radius: 0 !important;
font-family: 'VT323', monospace !important; font-size: 17px !important; letter-spacing: 1px !important; text-transform: uppercase !important;
background: var(--faye-panel) !important; color: var(--faye-text) !important;
border: 2px solid !important;
border-color: var(--faye-lavender) var(--faye-border-dark) var(--faye-border-dark) var(--faye-lavender) !important;
}
#ri-panel .ri-btn:hover:not(:disabled), #ri-panel .ri-saved-act:hover, #ri-panel .ri-lib-act:hover { background: var(--faye-indigo) !important; color: var(--faye-pink) !important; }
#ri-panel .ri-btn-use, #ri-panel .ri-lib-save-btn { background: var(--faye-tb-pink) !important; color: #ffffff !important; border: 3px solid var(--faye-indigo) !important; box-shadow: 3px 3px 0 rgba(10,13,28,0.85) !important; text-shadow: 1px 1px 0 rgba(52,73,121,0.8) !important; }
#ri-panel .ri-btn-use:hover:not(:disabled), #ri-panel .ri-lib-save-btn:hover { background: var(--faye-tb-pink) !important; filter: brightness(1.12) !important; color: #ffffff !important; }
#ri-panel .ri-saved-del:hover, #ri-panel .ri-lib-del:hover { color: var(--faye-pink) !important; border-color: var(--faye-pink) !important; }
#ri-panel .ri-chip { border-radius: 0 !important; font-family: 'VT323', monospace !important; font-size: 16px !important; background: var(--faye-panel) !important; color: var(--faye-text-dim) !important; border: 2px solid var(--faye-indigo) !important; }
#ri-panel .ri-chip:hover { border-color: var(--faye-lavender) !important; color: var(--faye-text) !important; }
#ri-panel .ri-chip.ri-on { color: var(--faye-pink) !important; border-color: var(--faye-pink) !important; background: var(--faye-panel-alt) !important; font-weight: 400 !important; }
#ri-panel .ri-nav-btn, #ri-panel .ri-save-draft-btn { border-radius: 0 !important; color: var(--faye-text-dim) !important; }
#ri-panel .ri-nav-btn:hover, #ri-panel .ri-save-draft-btn:hover { color: var(--faye-pink) !important; background: none !important; }
/* status line = notepad status bar */
#ri-panel .ri-status { background: var(--faye-panel) !important; border-top: 2px solid var(--faye-indigo) !important; color: var(--faye-text-dim) !important; font-family: 'VT323', monospace !important; font-size: 15px !important; letter-spacing: 1px !important; text-align: left !important; padding: 1px 10px !important; margin: 6px -12px -10px !important; }
/* toolbar buttons + toggle */
#ri-toolbar { border-top: none !important; }
.ri-icon-btn { border-radius: 0 !important; border: none !important; }
.ri-icon-btn.ri-on { color: var(--faye-pink) !important; background: none !important; border: none !important; }
.ri-dot { border-radius: 0 !important; box-shadow: none !important; background: var(--faye-pink) !important; }
#ri-panel .ri-toggle-track { background: var(--faye-panel-dark) !important; box-shadow: inset 0 0 0 2px var(--faye-lavender) !important; }
#ri-panel .ri-toggle input:checked ~ .ri-toggle-track { background: var(--faye-tb-pink) !important; box-shadow: inset 0 0 0 2px var(--faye-indigo) !important; border: none !important; }
#ri-panel .ri-toggle-thumb { transition: none !important; }
#ri-panel .ri-toggle-track { transition: none !important; }
/* ---------- v7 ---------- */
/* dock input: no dotted underline, prompt arrow after the text and fainter */
[data-component="InputArea"] [class*="inputWrapper" i],
[data-component="InputArea"] [class*="inputWrapper" i]:focus-within { border-bottom: none !important; }
[data-component="InputArea"] [class*="inputWrapper" i]:focus-within { background: rgba(10,13,28,0.75) !important; }
[data-component="InputArea"] [class*="inputWrapper" i]:has(textarea:placeholder-shown)::before { content: "waiting for user input... \25BC" !important; opacity: 0.5 !important; }
/* drawer + portrait tabs: thin lavender border like everything else */
[class*="drawerTab" i]:not([class*="drawerTabs" i]),
[class*="portraitTab" i]:not([class*="portraitTabs" i]) { border: 2px solid var(--faye-lavender) !important; }
[class*="wrapperRight" i] [class*="drawerTab" i], [class*="portraitTabRight" i] { border-right: none !important; }
[class*="wrapperLeft" i] [class*="drawerTab" i], [class*="portraitTabLeft" i] { border-left: none !important; }
html [class*="drawerTab" i][class*="drawerTabActive" i], html [class*="wrapperOpen" i] [class*="drawerTab" i], html [class*="portraitTab" i][class*="portraitTabActive" i] { border-color: var(--faye-lavender) !important; }
@media (max-width: 720px) {
/* menu buttons hug the left on phones */
[data-component="InputArea"] [class*="actionBar" i] { justify-content: flex-start !important; }
/* inlay fab: a normal small key on the saucepan row instead of a floating blocker */
button.inlay-fab {
position: fixed !important;
inset: auto 120px 18px auto !important;
width: 30px !important; height: 30px !important; min-width: 30px !important; min-height: 30px !important;
padding: 0 !important; margin: 0 !important;
display: inline-flex !important; align-items: center !important; justify-content: center !important;
background: none !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
animation: none !important;
color: var(--faye-text-dim) !important;
z-index: 21 !important;
}
button.inlay-fab:hover { color: var(--faye-pink) !important; background: none !important; }
button.inlay-fab svg { width: 15px !important; height: 15px !important; }
}
/* ---------- v8 ---------- */
/* inlay fab: wide desktop = visible themed widget; mid widths = small key left of send; phones = small key on the saucepan row */
button.inlay-fab {
position: fixed !important;
inset: auto 62px 22px auto !important;
width: 30px !important; height: 30px !important; min-width: 30px !important; min-height: 30px !important;
padding: 0 !important; margin: 0 !important;
font-size: 0 !important; gap: 0 !important;
display: inline-flex !important; align-items: center !important; justify-content: center !important;
background: none !important; border: none !important; border-radius: 0 !important; box-shadow: none !important;
animation: none !important; transition: none !important;
color: var(--faye-text-dim) !important;
z-index: 21 !important;
}
button.inlay-fab:hover { color: var(--faye-pink) !important; background: none !important; }
button.inlay-fab svg { width: 15px !important; height: 15px !important; display: block !important; flex: none !important; color: inherit !important; stroke: currentColor !important; opacity: 1 !important; }
@media (min-width: 1101px) {
button.inlay-fab {
inset: auto 20px 20px auto !important;
width: 36px !important; height: 36px !important; min-width: 36px !important;
padding: 0 !important; gap: 0 !important; font-size: 0 !important;
background: var(--faye-panel-dark) !important;
border: 2px solid var(--faye-lavender) !important;
box-shadow: 3px 3px 0 rgba(10,13,28,0.85) !important;
color: var(--faye-pink) !important;
}
button.inlay-fab:hover { background: var(--faye-indigo) !important; color: #ffffff !important; }
}
@media (max-width: 720px) {
button.inlay-fab { inset: auto 132px 21px auto !important; }
}
/* ---------- v9: Lumiverse Suite quick toolbar (v2 floating, fill-screen) = the top bar itself ---------- */
[data-component="QuickToolbar"] {
--quick-toolbar-icon-size: 16px;
--quick-toolbar-gap: 4px;
--quick-toolbar-padding-block: 4px;
--quick-toolbar-opacity: 1;
--quick-toolbar-backdrop-color: transparent;
}
[data-component="QuickToolbar"][data-quick-toolbar-placement="floating"] {
position: fixed !important;
top: 0 !important; left: 0 !important; right: auto !important; bottom: auto !important;
width: 100vw !important; max-width: 100vw !important;
height: 42px !important; min-height: 0 !important;
margin: 0 !important; padding: 0 8px !important;
transform: none !important;
box-sizing: border-box !important;
display: flex !important; align-items: center !important;
overflow: hidden !important;
z-index: 100 !important;
background: var(--faye-tb-pink) !important;
border: none !important; border-radius: 0 !important; box-shadow: none !important;
}
/* chat page: compact toolbar sits at the left of the native bar (which keeps the gradient + the quote + its own buttons) */
html:has([data-component="ChatView"]) [data-component="QuickToolbar"][data-quick-toolbar-placement="floating"] {
width: auto !important; max-width: calc(100vw - 132px) !important; padding: 0 4px !important;
}
@media (max-width: 720px) {
html:has([data-component="ChatView"]) [data-component="QuickToolbar"][data-quick-toolbar-placement="floating"] { max-width: calc(100vw - 108px) !important; }
}
[data-component="QuickToolbar"] [class*="resizeHandle" i],
[data-component="QuickToolbar"] [data-toolbar-resize-handle],
[data-component="QuickToolbar"] [data-toolbar-drag-handle] { display: none !important; }
[data-component="QuickToolbar"] nav {
display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-start !important;
gap: 4px !important; width: 100% !important; height: 100% !important; max-width: none !important;
margin: 0 !important; padding: 0 !important;
overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none !important;
background: none !important;
}
[data-component="QuickToolbar"] nav::-webkit-scrollbar { display: none; }
[data-component="QuickToolbar"] nav > *, [data-component="QuickToolbar"] [class*="cardScroller" i] { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 4px !important; width: auto !important; height: auto !important; flex: 0 0 auto !important; }
[data-component="QuickToolbar"] button {
flex: 0 0 auto !important;
display: inline-flex !important; align-items: center !important; justify-content: center !important;
width: 34px !important; min-width: 34px !important; max-width: 34px !important; height: 30px !important;
margin: 0 !important; padding: 0 !important;
background: none !important; border: none !important; border-radius: 0 !important; box-shadow: none !important;
color: #ffffff !important; opacity: 1 !important;
}
[data-component="QuickToolbar"] button:hover,
[data-component="QuickToolbar"] button[aria-pressed="true"],
[data-component="QuickToolbar"] button[aria-expanded="true"] { background: rgba(255,255,255,0.22) !important; }
[data-component="QuickToolbar"] button svg { width: 16px !important; height: 16px !important; color: #ffffff !important; stroke: currentColor !important; opacity: 1 !important; }
[data-component="QuickToolbar"] button [class*="label" i] { display: none !important; }
/* home page + anywhere else: leave room under the fixed bar */
html:has([data-component="QuickToolbar"][data-quick-toolbar-placement="floating"]) [data-component="LandingPage"] { padding-top: 52px !important; }
html:not(#faye) [data-component="QuickToolbar"][data-quick-toolbar-placement="floating"] { background: var(--faye-tb-pink) !important; }
html:not(#faye):has([data-component="ChatView"]) [data-component="QuickToolbar"][data-quick-toolbar-placement="floating"] { background: transparent !important; }
/* an open drawer keeps its header: toolbar backs off on desktop, hides on phones */
html:has([class*="wrapperOpen" i]) [data-component="QuickToolbar"][data-quick-toolbar-placement="floating"] { max-width: calc(100vw - 480px) !important; }
@media (max-width: 720px) {
html:has([class*="wrapperOpen" i]) [data-component="QuickToolbar"][data-quick-toolbar-placement="floating"] { visibility: hidden !important; }
}
/* quote only when there is room next to the toolbar */
@media (max-width: 1000px) {
html:has([data-component="QuickToolbar"]) [data-component="ChatView"] [class*="chatToolbar" i]::before { display: none !important; }
}
/* inlay: not on the homepage, not over an open drawer */
html:has([data-component="LandingPage"]) button.inlay-fab,
html:has([class*="wrapperOpen" i]) button.inlay-fab { display: none !important; }
/* ---------- main drawer (Ari / Profile / Extend / Theme ...) ---------- */
[data-lumiverse-surface="viewport-drawer"] { background: var(--faye-panel-dark) !important; box-shadow: none !important; border-left: 2px solid var(--faye-lavender) !important; }
[class*="wrapperLeft" i] [data-lumiverse-surface="viewport-drawer"] { border-left: none !important; border-right: 2px solid var(--faye-lavender) !important; }
[data-lumiverse-surface="viewport-drawer"] [class*="sidebar" i]:not([class*="sidebarBottom" i]) {
background: var(--faye-panel) !important;
border-right: 2px solid var(--faye-indigo) !important;
}
[data-lumiverse-surface="viewport-drawer"] [class*="sidebarBottom" i] { border-top: 2px dashed var(--faye-indigo) !important; }
[data-lumiverse-surface="viewport-drawer"] [class*="tabDivider" i] { height: 0 !important; background: none !important; border-top: 2px dashed var(--faye-indigo) !important; }
[data-lumiverse-surface="viewport-drawer"] [class*="tabBtn" i] {
border-radius: 0 !important;
background: none !important;
color: var(--faye-text-dim) !important;
box-shadow: none !important;
transition: none !important;
}
[data-lumiverse-surface="viewport-drawer"] [class*="tabBtn" i]:hover { background: var(--faye-indigo) !important; color: #ffffff !important; }
[data-lumiverse-surface="viewport-drawer"] [class*="tabBtnActive" i] {
background: var(--faye-panel-dark) !important;
color: var(--faye-pink) !important;
box-shadow: inset 3px 0 0 var(--faye-pink) !important;
}
[class*="wrapperLeft" i] [data-lumiverse-surface="viewport-drawer"] [class*="tabBtnActive" i] { box-shadow: inset -3px 0 0 var(--faye-pink) !important; }
[data-lumiverse-surface="viewport-drawer"] [class*="tabLabel" i] { font-family: 'VT323', monospace !important; font-size: 14px !important; letter-spacing: 0.5px !important; text-transform: uppercase !important; color: inherit !important; font-weight: 400 !important; max-width: 52px !important; }
[data-lumiverse-surface="viewport-drawer"] [class*="tabBtn" i] svg { color: inherit !important; stroke: currentColor !important; }
[data-lumiverse-surface="viewport-drawer"] [class*="tabBadge" i] { background: var(--faye-pink) !important; color: var(--faye-panel-dark) !important; border-radius: 0 !important; }
[data-lumiverse-surface="viewport-drawer"] [class*="panelHeader" i] {
background: var(--faye-tb-pink) !important;
border-bottom: 2px solid var(--faye-indigo) !important;
min-height: 42px !important;
padding: 6px 12px !important;
}
[data-lumiverse-surface="viewport-drawer"] [class*="panelTitle" i] { font-family: 'Pixelify Sans', monospace !important; font-weight: 700 !important; font-size: 19px !important; color: #ffffff !important; text-shadow: 2px 2px 0 rgba(52,73,121,0.8) !important; }
[data-lumiverse-surface="viewport-drawer"] [class*="guideButton" i] { color: #ffffff !important; opacity: 0.8 !important; border-radius: 0 !important; }
[data-lumiverse-surface="viewport-drawer"] [class*="guideButton" i]:hover { background: rgba(255,255,255,0.2) !important; opacity: 1 !important; }
[data-lumiverse-surface="viewport-drawer"] [class*="panelHeader" i] button { color: #ffffff !important; border-radius: 0 !important; }
[data-lumiverse-surface="viewport-drawer"] [class*="panelHeader" i] button:hover { background: rgba(255,255,255,0.2) !important; }
[data-lumiverse-surface="viewport-drawer"] [class*="panelContent" i] {
background: repeating-linear-gradient(to bottom, transparent 0 27px, rgba(152,150,187,0.05) 27px 28px), var(--faye-panel-dark) !important;
font-family: 'Pixelify Sans', monospace !important;
}
/* gradient frames for windows with gradient title bars */
#ri-panel.ri-open { border: 3px solid transparent !important; border-image: var(--faye-tb-pink) 1 !important; }
#bw-popup-window, #bw-popup-window[data-theme=dark] { border: 4px solid transparent !important; border-image: var(--faye-tb-pink) 1 !important; }
/* ===================== MESSAGE TEXT — visual-novel prose =====================
hooks: lumiverse wraps quoted speech in span.proseDialogue; italics/bold are em/strong (.proseItalic/.proseBold) */
html [data-component="MinimalMessage"] [data-component="MessageContent"] p { color: var(--faye-text-dim) !important; font-family: 'Pixelify Sans', monospace !important; }
/* speech boxes */
html [data-component="MinimalMessage"] [data-component="MessageContent"] [class*="proseDialogue" i] {
display: block !important;
position: relative !important;
margin: 14px 0 !important;
padding: 10px 34px 12px 16px !important;
background: var(--faye-panel-alt) !important;
border: 2px solid var(--faye-periwinkle-light) !important;
box-shadow: 4px 4px 0 rgba(10,13,28,0.85) !important;
color: var(--faye-white) !important;
text-align: left !important;
}
html [data-component="MinimalMessage"] [data-component="MessageContent"] [class*="proseDialogue" i]::after {
content: "";
position: absolute; right: 10px; bottom: 8px;
width: 12px; height: 7px;
background: var(--faye-pink);
clip-path: polygon(0 0, 100% 0, 50% 100%);
}
html [data-component="MinimalMessage"] [data-component="MessageContent"] [class*="proseDialogue" i]::before {
content: "";
position: absolute; left: 14px; top: -7px;
width: 10px; height: 10px;
background: var(--faye-panel-alt);
border-left: 2px solid var(--faye-periwinkle-light);
border-top: 2px solid var(--faye-periwinkle-light);
transform: rotate(45deg);
}
html [data-component="MinimalMessage"] [data-component="MessageContent"] [class*="proseDialogue" i] :is(em, strong, [class*="proseItalic" i], [class*="proseBold" i]) { background: none !important; box-shadow: none !important; padding: 0 !important; color: inherit !important; text-shadow: none !important; }
/* italic = plain emphasis: just a touch brighter and italic, no box */
html [data-component="MinimalMessage"] [data-component="MessageContent"] :is(em, [class*="proseItalic" i]) {
color: #b9bff5 !important;
font-style: italic !important;
background: none !important;
box-shadow: none !important;
padding: 0 !important;
}
/* optional "thought" style for text that ends up in a <q> (e.g. via a regex script turning 'thought' into <q>thought</q>) */
html [data-component="MinimalMessage"] [data-component="MessageContent"] q {
color: #a9b0ee !important;
font-style: italic !important;
padding: 0 8px !important;
background: linear-gradient(to right, rgba(126,131,206,0.24), rgba(126,131,206,0.04)) !important;
box-shadow: inset 3px 0 0 var(--faye-periwinkle-light) !important;
-webkit-box-decoration-break: clone; box-decoration-break: clone;
}
/* shouting / emphasis (bold) */
html [data-component="MinimalMessage"] [data-component="MessageContent"] :is(strong, [class*="proseBold" i], [class*="proseInlineEmphasis" i]) {
color: var(--faye-pink) !important;
font-weight: 700 !important;
letter-spacing: 0.4px;
text-shadow: 1px 1px 0 var(--faye-indigo) !important;
}
/* quote block (letters, lore): corner-bracket note, deliberately not a window */
html [data-component="MinimalMessage"] [data-component="MessageContent"] blockquote {
position: relative !important;
margin: 18px 6px 14px !important;
padding: 22px 24px 14px !important;
background: rgba(126,131,206,0.10) !important;
border: none !important;
border-radius: 0 !important;
color: var(--faye-text) !important;
font-style: italic !important;
background-image:
linear-gradient(var(--faye-pink), var(--faye-pink)), linear-gradient(var(--faye-pink), var(--faye-pink)),
linear-gradient(var(--faye-pink), var(--faye-pink)), linear-gradient(var(--faye-pink), var(--faye-pink)),
linear-gradient(var(--faye-pink), var(--faye-pink)), linear-gradient(var(--faye-pink), var(--faye-pink)),
linear-gradient(var(--faye-pink), var(--faye-pink)), linear-gradient(var(--faye-pink), var(--faye-pink)) !important;
background-size: 18px 3px, 3px 18px, 18px 3px, 3px 18px, 18px 3px, 3px 18px, 18px 3px, 3px 18px !important;
background-position: 0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100% !important;
background-repeat: no-repeat !important;
}
html [data-component="MinimalMessage"] [data-component="MessageContent"] blockquote::before {
content: "NOTE";
position: absolute; top: 4px; left: 24px;
font: normal 16px/1 'VT323', monospace; letter-spacing: 3px;
color: var(--faye-pink);
}
html [data-component="MinimalMessage"] [data-component="MessageContent"] blockquote p { color: var(--faye-text) !important; margin: 0 0 8px !important; }
html [data-component="MinimalMessage"] [data-component="MessageContent"] blockquote p:last-child { margin-bottom: 0 !important; }
/* headings */
html [data-component="MinimalMessage"] [data-component="MessageContent"] h1 {
display: block; margin: 18px 0 12px !important; padding: 4px 14px !important;
background: var(--faye-tb-pink) !important; border: 2px solid var(--faye-lavender) !important;
color: #ffffff !important; font: 400 32px/1.15 'VT323', monospace !important; letter-spacing: 3px !important; text-transform: uppercase !important;
text-shadow: 2px 2px 0 rgba(52,73,121,0.8) !important;
}
html [data-component="MinimalMessage"] [data-component="MessageContent"] h2 {
margin: 16px 0 10px !important; padding: 2px 0 !important;
border-bottom: 2px dashed var(--faye-indigo) !important;
color: var(--faye-pink) !important; font: 400 21px/1.2 'VT323', monospace !important; letter-spacing: 2px !important; text-transform: uppercase !important;
}
html [data-component="MinimalMessage"] [data-component="MessageContent"] h3 {
margin: 14px 0 8px !important; padding-left: 10px !important; border-left: 3px solid var(--faye-pink) !important;
color: var(--faye-text) !important; font: 400 19px/1.2 'VT323', monospace !important; letter-spacing: 1.5px !important; text-transform: uppercase !important;
}
html [data-component="MinimalMessage"] [data-component="MessageContent"] :is(h4, h5, h6) {
margin: 12px 0 6px !important; color: var(--faye-lavender) !important; font: 400 17px/1.2 'VT323', monospace !important; letter-spacing: 1.5px !important; text-transform: uppercase !important;
}
/* lists = choice buttons */
html [data-component="MinimalMessage"] [data-component="MessageContent"] :is(ul, ol) {
display: grid !important; gap: 8px !important; margin: 12px 0 !important; padding: 0 !important; list-style: none !important;
}
html [data-component="MinimalMessage"] [data-component="MessageContent"] li {
margin: 0 !important; padding: 6px 14px 7px !important; list-style: none !important;
background: var(--faye-panel-alt) !important; border: 2px solid var(--faye-lavender) !important;
color: var(--faye-white) !important; text-align: center !important;
font: 400 19px/1.3 'VT323', monospace !important; letter-spacing: 1px !important;
}
html [data-component="MinimalMessage"] [data-component="MessageContent"] li:hover { border-color: var(--faye-pink) !important; color: var(--faye-pink) !important; }
html [data-component="MinimalMessage"] [data-component="MessageContent"] li :is(ul, ol) { margin: 8px 0 0 !important; }
html [data-component="MinimalMessage"] [data-component="MessageContent"] li li { font-size: 17px !important; background: var(--faye-panel) !important; border-color: var(--faye-indigo) !important; }
html [data-component="MinimalMessage"] [data-component="MessageContent"] li::marker { content: none; }
/* tables, inline code, links, rules */
html [data-component="MinimalMessage"] [data-component="MessageContent"] table { border-collapse: collapse !important; width: 100% !important; border: none !important; }
html [data-component="MinimalMessage"] [data-component="MessageContent"] :is(th, td) { border: 2px solid var(--faye-indigo) !important; padding: 5px 10px !important; background: none !important; color: var(--faye-text) !important; }
html [data-component="MinimalMessage"] [data-component="MessageContent"] th { background: var(--faye-panel-alt) !important; color: var(--faye-pink) !important; font: 400 17px 'VT323', monospace !important; letter-spacing: 1px !important; text-transform: uppercase !important; }
html [data-component="MinimalMessage"] [data-component="MessageContent"] :not(pre) > code { background: var(--faye-panel-alt) !important; border: none !important; border-radius: 0 !important; color: var(--faye-periwinkle-light) !important; box-shadow: inset 0 0 0 1px var(--faye-indigo) !important; font: 400 17px 'VT323', monospace !important; padding: 0 6px !important; }
/* links = promo-poster sticker, like the preview card's CHAT NOW!! */
html [data-component="MinimalMessage"] [data-component="MessageContent"] a:not(:has(img)) {
display: inline-block !important;
max-width: 100% !important;
margin: 2px 3px !important;
padding: 0 10px 1px !important;
background: linear-gradient(135deg, var(--faye-pink), var(--faye-lavender)) !important;
border: 2px solid var(--faye-white) !important;
box-shadow: 2px 2px 0 var(--faye-indigo), 4px 4px 0 rgba(10,13,28,0.85) !important;
color: #ffffff !important;
font: 400 18px/1.3 'VT323', monospace !important;
letter-spacing: 1px !important;
text-transform: uppercase !important;
text-decoration: none !important;
text-shadow: 1px 1px 0 var(--faye-indigo) !important;
overflow-wrap: anywhere !important;
transform: rotate(-1.5deg);
vertical-align: baseline;
}
html [data-component="MinimalMessage"] [data-component="MessageContent"] a:not(:has(img))::after { content: "!!"; margin-left: 5px; color: var(--faye-yellow); }
html [data-component="MinimalMessage"] [data-component="MessageContent"] a:not(:has(img)):hover { filter: brightness(1.12); transform: rotate(0deg); }
html [data-component="MinimalMessage"] [data-component="MessageContent"] hr { border: none !important; border-top: 2px dashed var(--faye-indigo) !important; margin: 16px 0 !important; }
/* clear the old window-style heading decorations */
html [data-component="MinimalMessage"] [data-component="MessageContent"] :is(h1, h2, h3, h4, h5, h6) { height: auto !important; min-height: 0 !important; overflow: visible !important; position: relative !important; box-shadow: none !important; }
html [data-component="MinimalMessage"] [data-component="MessageContent"] :is(h1, h2, h3, h4, h5, h6)::before,
html [data-component="MinimalMessage"] [data-component="MessageContent"] :is(h1, h2, h3, h4, h5, h6)::after { content: none !important; display: none !important; }
/* numbered lists keep their numbers inside the choice buttons */
html [data-component="MinimalMessage"] [data-component="MessageContent"] ol { counter-reset: faye-item; }
html [data-component="MinimalMessage"] [data-component="MessageContent"] ol > li { counter-increment: faye-item; }
html [data-component="MinimalMessage"] [data-component="MessageContent"] ol > li::before { content: counter(faye-item) ".\00a0\00a0"; color: var(--faye-pink); }