Bubblegum-pink sea with rising hearts & bubbles, drifting waves, starfish and shells. Cute jellyfish-wobbles. all cute all in a nice dark format so that your eyes don't get obliterated. (mine did when i tried a light mode first.)
Pink JellyFish
Gallery
2 images
Homepage background
Palette
9 colors · 7 settings
dark
- Primary
#ff7eb9 - Secondary
#c9a7ff - Background
#1f0a2e - Text
#ffe3f1 - Danger
#ff6b8b - Success
#7fe3c8 - Warning
#ffd08a - Speech
#ffb3dc - Thoughts
#c9a7ff
Theme controls
- Accent color
- 332° · 100% · 74%
- Preferred mode
- dark
- Corner scale
- 1.4
- Glass surfaces
- Yes
- Type scale
- 1
- Interface scale
- 1
Stylesheets
2 stylesheets
/* ═══════════════════════════════════════════════════════════
PINK JELLYFISH ♡ by Heart Goldie
A dreamy bubblegum-pink sea: rising hearts & bubbles, drifting waves,
starfish on the seabed, frosted rose glass and a heart-dotted font.
FONT: "JellyHeart" (squishy, wobbly jellyfish-bubble letters with heart-shaped i and j dots) - chat, UI and names.
═══════════════════════════════════════════════════════════ */
:root {
/* ─────────────────────────────────────────────────────────
FONT COLOURS (hearts on i / j follow these automatically)
───────────────────────────────────────────────────────── */
/* Main text colour - chat text, UI text, headings, i/j hearts. */
--po-font-color: #ffe3f1;
/* MESSAGE TEXT COLOUR - the text inside chat messages (yours and the character's),
including the text box when you edit a message. Follows --po-font-color by default.
Change just this one line to recolour messages and leave the rest of the UI alone.
The hearts on the i and j follow it too. e.g. --po-message-color: #ffd1e8;
Dialogue, *italic* and bold below follow this colour unless you give them their own. */
--po-message-color: var(--po-font-color);
/* Optional overrides. By default they all follow --po-font-color.
Give any of them its own colour if you want e.g. pink names + white text. */
--po-heading-color: var(--po-font-color);
--po-dialogue-color: var(--po-message-color);
--po-action-color: color-mix(in srgb, var(--po-message-color) 82%, #ff8fc7); /* *italic* text */
--po-bold-color: var(--po-message-color);
--po-name-color: #ff9ccb; /* speaker names */
--po-link-color: #8fe9f0;
/* Muted text is mixed from the main colour automatically. */
--po-font-color-soft: color-mix(in srgb, var(--po-font-color) 70%, #2a0d36);
--po-font-color-dim: color-mix(in srgb, var(--po-font-color) 48%, #2a0d36);
/* ─────────────────────────────────────────────────────────
TYPOGRAPHY
───────────────────────────────────────────────────────── */
--po-font: "JellyHeart", "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
--po-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--po-chat-font-scale: 1; /* stacks with Lumiverse's own font scale */
--po-meta-font-scale: 0.8;
--po-letter-spacing: 0.012em; /* a touch of air makes the round letters cuter */
--po-text-glow: 0 0 12px color-mix(in srgb, currentColor 26%, transparent); /* set to none for crisp text */
/* ─────────────────────────────────────────────────────────
DECOR & MOTION
───────────────────────────────────────────────────────── */
--po-rise-opacity: 0.8; /* rising hearts + bubbles (0 = hide) */
--po-sea-opacity: 1; /* waves + seabed strip (0 = hide) */
--po-rise-speed: 24s; /* higher = slower. Time for hearts/bubbles to drift one 420px tile */
--po-wave-speed: 90s; /* higher = slower. Time for the back wave to drift one 800px tile (front wave moves at half that speed) */
--po-sea-height: 150px;
--po-blur: 4px; /* glass blur: lower = smoother animation (was 8px) */
--po-radius: 22px;
/* ─────────────────────────────────────────────────────────
AVATAR PORTRAITS (tall sticky rail beside each message)
Width/height accept any CSS length or clamp(). Crop with --po-img-x/y
(e.g. center / top / 30%) and zoom with --po-img-scale.
───────────────────────────────────────────────────────── */
--po-avatar-width-char: var(--ui-portrait-w);
--po-avatar-height-char: var(--ui-portrait-h);
--po-avatar-width-user: var(--ui-portrait-w);
--po-avatar-height-user: var(--ui-portrait-h);
--po-avatar-sticky-top: 72px;
--po-portrait-radius: 22px;
--po-portrait-decor: 1; /* pink tide tint over the portrait (0 = off) */
--po-portrait-fade: 90%; /* where the soft edge starts; 100% = fully solid, no fade */
--po-portrait-backing: #2a0d36; /* solid colour behind the portrait so the sea never shows through */
--po-img-scale: 1;
--po-img-x: center;
--po-img-y: top;
/* Message panel (the glass the text sits on) */
--po-content-radius: 38px;
--po-content-blur: 5px; /* (was 10px) */
--po-content-glass: hsla(305, 50%, 16%, 0.50);
--po-content-glass-user: hsla(335, 62%, 26%, 0.46);
/* ─────────────────────────────────────────────────────────
COLOUR PALETTE
───────────────────────────────────────────────────────── */
--po-accent: #ff7eb9; /* bubblegum pink */
--po-accent-hot: #ff5fa8;
--po-accent-soft: #ffb3dc;
--po-lilac: #c9a7ff;
--po-aqua: #86e6ee;
--po-sea-top: #4a1a5a;
--po-sea-mid: #321044;
--po-sea-deep: #1f0a2e;
/* Drawers / panels / cards (frosted rose glass) */
--po-drawer-panel: hsla(300, 48%, 15%, 0.66);
--po-drawer-icon-strip: hsla(300, 50%, 11%, 0.72);
--po-drawer-toggle: hsla(300, 50%, 11%, 0.55);
--po-glass: hsla(300, 46%, 17%, 0.56);
--po-glass-hover: hsla(300, 46%, 21%, 0.64);
--po-glass-border: rgba(255, 154, 205, 0.30);
--po-glass-border-hover: rgba(255, 154, 205, 0.55);
--po-tab-active: hsla(330, 80%, 70%, 0.22);
--po-tab-hover: hsla(330, 80%, 70%, 0.13);
--po-nav-hover: hsla(330, 80%, 70%, 0.16);
--po-nav-active: hsla(330, 80%, 70%, 0.28);
--po-modal: hsla(300, 46%, 14%, 0.88);
--po-modal-backdrop: hsla(300, 60%, 8%, 0.38);
/* Chat message cards */
--po-card: linear-gradient(150deg, hsla(318, 55%, 24%, 0.62), hsla(290, 50%, 15%, 0.58));
--po-card-user: linear-gradient(150deg, hsla(335, 70%, 36%, 0.50), hsla(300, 55%, 20%, 0.56));
--po-card-border: rgba(255, 154, 205, 0.34);
--po-card-glow: rgba(255, 105, 180, 0.22);
--po-quote-bg: color-mix(in srgb, var(--po-accent) 11%, transparent);
--po-code-bg: hsla(290, 55%, 10%, 0.60);
/* Composer */
--po-input-bg: hsla(300, 46%, 16%, 0.66);
--po-input-border: rgba(255, 154, 205, 0.42);
--po-scrollbar: color-mix(in srgb, var(--po-accent) 45%, transparent);
--po-scrollbar-hover: color-mix(in srgb, var(--po-accent) 70%, transparent);
--po-selection: color-mix(in srgb, var(--po-accent) 40%, transparent);
}
/* ═════════════════════════════════════════════════════════
EVERYTHING BELOW USES THE VARIABLES ABOVE.
═════════════════════════════════════════════════════════ */
/* ─────────────────────────────────────────────────────────
LOADED FONT: JellyHeart (jellyfish-cute, with heart-shaped i / j dots)
Puffy, softly wobbling jelly letters (Medium + Bold, upright + italic) with plump heart i / j dots.
───────────────────────────────────────────────────────── */
@font-face {
font-family: "JellyHeart";
font-style: normal;
font-weight: 100 599;
font-display: swap;
src: url("assets/fonts/jellyheart-medium.woff") format("woff");
}
@font-face {
font-family: "JellyHeart";
font-style: normal;
font-weight: 600 900;
font-display: swap;
src: url("assets/fonts/jellyheart-bold.woff") format("woff");
}
@font-face {
font-family: "JellyHeart";
font-style: italic;
font-weight: 100 599;
font-display: swap;
src: url("assets/fonts/jellyheart-mediumitalic.woff") format("woff");
}
@font-face {
font-family: "JellyHeart";
font-style: italic;
font-weight: 600 900;
font-display: swap;
src: url("assets/fonts/jellyheart-bolditalic.woff") format("woff");
}
/* ─────────────────────────────────────────────────────────
LUMIVERSE TOKENS (mapped from the controls above)
───────────────────────────────────────────────────────── */
:root,
html,
html[data-theme-mode="dark"],
body {
--lumiverse-primary: var(--po-accent) !important;
--lumiverse-primary-hover: var(--po-accent-hot) !important;
--lumiverse-primary-light: rgba(255, 126, 185, 0.18) !important;
--lumiverse-primary-soft: rgba(255, 126, 185, 0.14) !important;
--lumiverse-primary-muted: rgba(255, 126, 185, 0.55) !important;
--lumiverse-primary-text: var(--po-accent-soft) !important;
--lumiverse-primary-010: rgba(255, 126, 185, 0.08) !important;
--lumiverse-primary-015: rgba(255, 126, 185, 0.12) !important;
--lumiverse-primary-020: rgba(255, 126, 185, 0.18) !important;
--lumiverse-primary-050: rgba(255, 126, 185, 0.45) !important;
--lumiverse-primary-contrast: #3a0f33 !important;
--lumiverse-primary-deep: #c2468a !important;
--lumiverse-primary-deep-hover: #a93475 !important;
--lumiverse-primary-deep-contrast: #ffffff !important;
--lumiverse-bg: var(--po-sea-mid) !important;
--lumiverse-bg-elevated: #3f1a52 !important;
--lumiverse-bg-hover: #4a2060 !important;
--lumiverse-bg-dark: rgba(20, 6, 30, 0.38) !important;
--lumiverse-bg-darker: rgba(20, 6, 30, 0.55) !important;
--lumiverse-bg-deep: var(--po-sea-deep) !important;
--lumiverse-bg-deep-080: rgba(31, 10, 46, 0.82) !important;
--lumiverse-surface: rgba(74, 28, 92, 0.62) !important;
--lumiverse-surface-raised: rgba(92, 36, 112, 0.72) !important;
--lumiverse-surface-hover: rgba(108, 44, 128, 0.72) !important;
--lumiverse-surface-muted: rgba(255, 154, 205, 0.06) !important;
--lumiverse-input-bg: hsla(300, 50%, 12%, 0.55) !important;
--lumiverse-text: var(--po-font-color) !important;
--lumiverse-text-primary: var(--po-font-color) !important;
--lumiverse-text-secondary: var(--po-font-color-soft) !important;
--lumiverse-text-muted: var(--po-font-color-soft) !important;
--lumiverse-text-dim: var(--po-font-color-dim) !important;
--lumiverse-text-hint: var(--po-font-color-dim) !important;
--lumiverse-icon: var(--po-accent-soft) !important;
--lumiverse-icon-muted: color-mix(in srgb, var(--po-accent-soft) 70%, #2a0d36) !important;
--lumiverse-icon-dim: color-mix(in srgb, var(--po-accent-soft) 45%, #2a0d36) !important;
--lumiverse-border: rgba(255, 154, 205, 0.34) !important;
--lumiverse-border-hover: rgba(255, 154, 205, 0.62) !important;
--lumiverse-border-light: rgba(255, 154, 205, 0.16) !important;
--lumiverse-border-subtle: rgba(255, 154, 205, 0.12) !important;
--lumiverse-border-neutral: rgba(255, 220, 240, 0.18) !important;
--lumiverse-border-neutral-hover: rgba(255, 220, 240, 0.36) !important;
--lumiverse-secondary: rgba(201, 167, 255, 0.14) !important;
--lumiverse-secondary-hover: rgba(201, 167, 255, 0.24) !important;
--lumiverse-secondary-border: rgba(201, 167, 255, 0.34) !important;
--lumiverse-danger: #ff6b8b !important;
--lumiverse-danger-hover: #ff4a72 !important;
--lumiverse-success: #7fe3c8 !important;
--lumiverse-warning: #ffd08a !important;
--lumiverse-error: #ff6b8b !important;
--lumiverse-danger-015: rgba(255, 107, 139, 0.16) !important;
--lumiverse-success-015: rgba(127, 227, 200, 0.16) !important;
--lumiverse-warning-015: rgba(255, 208, 138, 0.16) !important;
--lumiverse-radius-sm: 10px !important;
--lumiverse-radius: 14px !important;
--lumiverse-radius-md: 16px !important;
--lumiverse-radius-lg: 20px !important;
--lumiverse-radius-xl: 26px !important;
--lcs-radius: 18px !important;
--lcs-radius-sm: 12px !important;
--lcs-radius-xs: 8px !important;
--lumiverse-shadow-sm: 0 3px 12px rgba(255, 105, 180, 0.14) !important;
--lumiverse-shadow-md: 0 10px 30px rgba(20, 4, 30, 0.40) !important;
--lumiverse-shadow-lg: 0 20px 60px rgba(20, 4, 30, 0.50) !important;
--lumiverse-modal-backdrop: var(--po-modal-backdrop) !important;
--lumiverse-fill-subtle: rgba(255, 190, 225, 0.03) !important;
--lumiverse-fill: rgba(255, 190, 225, 0.07) !important;
--lumiverse-fill-hover: rgba(255, 190, 225, 0.12) !important;
--lumiverse-fill-medium: rgba(255, 190, 225, 0.17) !important;
--lumiverse-fill-strong: rgba(255, 190, 225, 0.26) !important;
--lumiverse-fill-heavy: rgba(40, 8, 44, 0.55) !important;
--lumiverse-fill-deepest: rgba(20, 4, 30, 0.78) !important;
--lumiverse-font-family: var(--po-font) !important;
--lumiverse-font-mono: var(--po-font-mono) !important;
--lumiverse-prose-dialogue: var(--po-dialogue-color) !important;
--lumiverse-prose-italic: var(--po-action-color) !important;
--lumiverse-prose-bold: var(--po-bold-color) !important;
--lumiverse-prose-blockquote: var(--po-font-color-soft) !important;
--lumiverse-prose-link: var(--po-link-color) !important;
--lcs-glass-bg: var(--po-glass) !important;
--lcs-glass-bg-hover: var(--po-glass-hover) !important;
--lcs-glass-border: var(--po-glass-border) !important;
--lcs-glass-border-hover: var(--po-glass-border-hover) !important;
--lcs-glass-blur: var(--po-blur) !important;
}
/* ─────────────────────────────────────────────────────────
TYPOGRAPHY: JellyHeart everywhere, coloured by --po-font-color
(a heart is just a glyph, so it inherits `color` for free)
───────────────────────────────────────────────────────── */
html,
body,
#root,
[data-theme],
[class*="_app_"],
[class*="_shell_"],
[class*="_layout_"],
[class*="_modal_"],
[class*="_drawer_"],
[class*="_panel_"],
[class*="_menu_"],
[class*="_popover_"],
[class*="_tooltip_"],
button,
input,
select,
textarea,
label {
font-family: var(--po-font) !important;
}
html,
body,
#root {
color: var(--po-font-color);
letter-spacing: var(--po-letter-spacing);
}
h1, h2, h3, h4, h5, h6,
[class*="_title_"],
[class*="_heading_"],
[class*="_headerTitle_"],
[class*="_panelTitle_"],
[class*="_modalTitle_"],
[class*="_sectionTitle_"],
[class*="_panelHeader_"] {
font-family: var(--po-font) !important;
font-weight: 700 !important;
letter-spacing: -0.01em;
color: var(--po-heading-color);
}
strong, b { font-weight: 700 !important; }
/* Code & technical readouts keep a monospace face */
code, pre, kbd, samp,
[class*="_highlightPre_"],
[class*="_textareaHighlighted_"],
[class*="_token_"],
[class*="_counter_"] {
font-family: var(--po-font-mono) !important;
}
/* ─────────────────────────────────────────────────────────
THE SEA: page background, rising hearts & bubbles, waves, seabed
───────────────────────────────────────────────────────── */
html,
body {
background:
radial-gradient(760px 480px at 50% -6%, rgba(255, 126, 185, 0.34), transparent 64%),
radial-gradient(520px 420px at 92% 14%, rgba(201, 167, 255, 0.20), transparent 68%),
radial-gradient(560px 460px at 4% 92%, rgba(255, 126, 185, 0.22), transparent 70%),
radial-gradient(140% 120% at 50% 40%, transparent 55%, rgba(14, 3, 22, 0.55) 100%),
linear-gradient(180deg, var(--po-sea-top) 0%, var(--po-sea-mid) 52%, var(--po-sea-deep) 100%) !important;
background-attachment: fixed !important;
}
/* let the sea show through the app shell */
#root,
#root > * {
background: transparent !important;
}
/* FIX (post-update): the sea layers below sit at negative z-index on body::before/::after (+ #root::before/::after).
Unless <body> is itself a stacking context, its own gradient background is painted
OVER those layers and hides them. isolation:isolate makes body a stacking context so
the layers paint above body's background but still beneath the app content. */
body {
isolation: isolate;
}
/* ── PERFORMANCE REWRITE ─────────────────────────────────────────────
The old version animated `background-position` on full-screen layers.
That forces the browser to REPAINT the whole sea every frame, and every
frosted-glass (backdrop-filter) panel on top has to re-blur it each time,
which is what made the animation choppy.
Now every moving layer is its own element that is slid with
`transform: translate3d()` (+ will-change). That runs on the GPU
compositor: no repaint, no layout, buttery smooth.
Each layer is oversized by exactly one loop period, so the loop is seamless.
Layers (back to front):
body::before rising hearts + bubbles
body::after back wave (800px tile, drifts left)
#root::before front wave (400px tile, drifts right)
#root::after seabed strip (static)
Same look, same --po-* knobs as before.
──────────────────────────────────────────────────────────────────── */
/* rising hearts + bubbles
near layer tile = 420px, far layer tile = 280px -> both divide 840px,
so one 840px slide loops perfectly. Duration is doubled to keep the
original drift speed (--po-rise-speed = time per 420px). */
body::before {
content: "";
transform-origin: 0 0;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: -840px;
z-index: -4;
pointer-events: none;
opacity: var(--po-rise-opacity);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.4C.9 8.2 3 4.5 6.4 4.5c2.2 0 3.7 1.2 5.6 3.3 1.9-2.1 3.4-3.3 5.6-3.3 3.4 0 5.5 3.7 4 7.1C19.5 16.4 12 21 12 21z' fill='%23ff8fc7' fill-opacity='0.55' transform='translate(34 60) rotate(-12 13.200000000000001 13.200000000000001) scale(1.1)'/%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.4C.9 8.2 3 4.5 6.4 4.5c2.2 0 3.7 1.2 5.6 3.3 1.9-2.1 3.4-3.3 5.6-3.3 3.4 0 5.5 3.7 4 7.1C19.5 16.4 12 21 12 21z' fill='%23ffc2e2' fill-opacity='0.6' transform='translate(300 30) rotate(10 8.399999999999999 8.399999999999999) scale(0.7)'/%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.4C.9 8.2 3 4.5 6.4 4.5c2.2 0 3.7 1.2 5.6 3.3 1.9-2.1 3.4-3.3 5.6-3.3 3.4 0 5.5 3.7 4 7.1C19.5 16.4 12 21 12 21z' fill='%23ff6fb5' fill-opacity='0.35' transform='translate(190 250) rotate(8 16.799999999999997 16.799999999999997) scale(1.4)'/%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.4C.9 8.2 3 4.5 6.4 4.5c2.2 0 3.7 1.2 5.6 3.3 1.9-2.1 3.4-3.3 5.6-3.3 3.4 0 5.5 3.7 4 7.1C19.5 16.4 12 21 12 21z' fill='%23ffb3dc' fill-opacity='0.5' transform='translate(360 330) rotate(-8 10.8 10.8) scale(0.9)'/%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.4C.9 8.2 3 4.5 6.4 4.5c2.2 0 3.7 1.2 5.6 3.3 1.9-2.1 3.4-3.3 5.6-3.3 3.4 0 5.5 3.7 4 7.1C19.5 16.4 12 21 12 21z' fill='%23ffd6ec' fill-opacity='0.6' transform='translate(80 360) rotate(14 7.199999999999999 7.199999999999999) scale(0.6)'/%3E%3Ccircle cx='120' cy='150' r='16' fill='%23ffd6ec' fill-opacity='0.066' stroke='%23ffd6ec' stroke-opacity='0.55' stroke-width='1.6'/%3E%3Cpath d='M111.2 148.4a9.6 9.6 0 0 1 8.0 -8.0' fill='none' stroke='%23fff' stroke-opacity='0.55' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='250' cy='120' r='9' fill='%23ffd6ec' fill-opacity='0.06' stroke='%23ffd6ec' stroke-opacity='0.5' stroke-width='1.6'/%3E%3Cpath d='M245.05 119.1a5.3999999999999995 5.3999999999999995 0 0 1 4.5 -4.5' fill='none' stroke='%23fff' stroke-opacity='0.5' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='340' cy='210' r='22' fill='%23ffd6ec' fill-opacity='0.054' stroke='%23ffd6ec' stroke-opacity='0.45' stroke-width='1.6'/%3E%3Cpath d='M327.9 207.8a13.2 13.2 0 0 1 11.0 -11.0' fill='none' stroke='%23fff' stroke-opacity='0.45' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='60' cy='260' r='10' fill='%23ffd6ec' fill-opacity='0.06' stroke='%23ffd6ec' stroke-opacity='0.5' stroke-width='1.6'/%3E%3Cpath d='M54.5 259.0a6.0 6.0 0 0 1 5.0 -5.0' fill='none' stroke='%23fff' stroke-opacity='0.5' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='230' cy='380' r='14' fill='%23ffd6ec' fill-opacity='0.06' stroke='%23ffd6ec' stroke-opacity='0.5' stroke-width='1.6'/%3E%3Cpath d='M222.3 378.6a8.4 8.4 0 0 1 7.0 -7.0' fill='none' stroke='%23fff' stroke-opacity='0.5' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='395' cy='90' r='7' fill='%23ffd6ec' fill-opacity='0.066' stroke='%23ffd6ec' stroke-opacity='0.55' stroke-width='1.6'/%3E%3Cpath d='M391.15 89.3a4.2 4.2 0 0 1 3.5 -3.5' fill='none' stroke='%23fff' stroke-opacity='0.55' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M12 1c.8 6.2 4.8 10.2 11 11-6.2.8-10.2 4.8-11 11-.8-6.2-4.8-10.2-11-11 6.2-.8 10.2-4.8 11-11z' fill='%23fff' fill-opacity='0.8' transform='translate(150 20) scale(0.55)'/%3E%3Cpath d='M12 1c.8 6.2 4.8 10.2 11 11-6.2.8-10.2 4.8-11 11-.8-6.2-4.8-10.2-11-11 6.2-.8 10.2-4.8 11-11z' fill='%23ffd6ec' fill-opacity='0.8' transform='translate(280 300) scale(0.45)'/%3E%3Cpath d='M12 1c.8 6.2 4.8 10.2 11 11-6.2.8-10.2 4.8-11 11-.8-6.2-4.8-10.2-11-11 6.2-.8 10.2-4.8 11-11z' fill='%23fff' fill-opacity='0.7' transform='translate(20 190) scale(0.4)'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.4C.9 8.2 3 4.5 6.4 4.5c2.2 0 3.7 1.2 5.6 3.3 1.9-2.1 3.4-3.3 5.6-3.3 3.4 0 5.5 3.7 4 7.1C19.5 16.4 12 21 12 21z' fill='%23ffc2e2' fill-opacity='0.5' transform='translate(210 40) rotate(-10 6.0 6.0) scale(0.5)'/%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.4C.9 8.2 3 4.5 6.4 4.5c2.2 0 3.7 1.2 5.6 3.3 1.9-2.1 3.4-3.3 5.6-3.3 3.4 0 5.5 3.7 4 7.1C19.5 16.4 12 21 12 21z' fill='%23ff9ccb' fill-opacity='0.4' transform='translate(40 210) rotate(12 6.6000000000000005 6.6000000000000005) scale(0.55)'/%3E%3Ccircle cx='100' cy='80' r='6' fill='%23ffd6ec' fill-opacity='0.06' stroke='%23ffd6ec' stroke-opacity='0.5' stroke-width='1.6'/%3E%3Cpath d='M96.7 79.4a3.5999999999999996 3.5999999999999996 0 0 1 3.0 -3.0' fill='none' stroke='%23fff' stroke-opacity='0.5' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='250' cy='200' r='8' fill='%23ffd6ec' fill-opacity='0.054' stroke='%23ffd6ec' stroke-opacity='0.45' stroke-width='1.6'/%3E%3Cpath d='M245.6 199.2a4.8 4.8 0 0 1 4.0 -4.0' fill='none' stroke='%23fff' stroke-opacity='0.45' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='150' cy='260' r='5' fill='%23ffd6ec' fill-opacity='0.06' stroke='%23ffd6ec' stroke-opacity='0.5' stroke-width='1.6'/%3E%3Cpath d='M147.25 259.5a3.0 3.0 0 0 1 2.5 -2.5' fill='none' stroke='%23fff' stroke-opacity='0.5' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M12 1c.8 6.2 4.8 10.2 11 11-6.2.8-10.2 4.8-11 11-.8-6.2-4.8-10.2-11-11 6.2-.8 10.2-4.8 11-11z' fill='%23fff' fill-opacity='0.8' transform='translate(60 40) scale(0.35)'/%3E%3Cpath d='M12 1c.8 6.2 4.8 10.2 11 11-6.2.8-10.2 4.8-11 11-.8-6.2-4.8-10.2-11-11 6.2-.8 10.2-4.8 11-11z' fill='%23ffd6ec' fill-opacity='0.8' transform='translate(220 140) scale(0.3)'/%3E%3Cpath d='M12 1c.8 6.2 4.8 10.2 11 11-6.2.8-10.2 4.8-11 11-.8-6.2-4.8-10.2-11-11 6.2-.8 10.2-4.8 11-11z' fill='%23fff' fill-opacity='0.7' transform='translate(120 170) scale(0.28)'/%3E%3C/svg%3E");
background-size: 420px 420px, 280px 280px;
background-position: 0 0, 0 0;
background-repeat: repeat, repeat;
backface-visibility: hidden;
contain: layout paint style;
transform: translate3d(0, 0, 0);
will-change: transform;
animation: poRise calc(var(--po-rise-speed) * 2) linear infinite;
}
/* back wave: 800px tile drifting left */
body::after {
content: "";
transform-origin: 0 0;
position: fixed;
left: 0;
right: -800px;
bottom: 0;
height: var(--po-sea-height);
z-index: -3;
pointer-events: none;
opacity: var(--po-sea-opacity);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='150' viewBox='0 0 800 150' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ff8fc7' stop-opacity='.34'/%3E%3Cstop offset='1' stop-color='%23b4469e' stop-opacity='.55'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M-400 70C-270 28 -130 112 0 70C130 28 270 112 400 70S670 112 800 70S1070 112 1200 70V150H-400Z' fill='url(%23g)'/%3E%3C/svg%3E");
background-size: 800px 100%;
background-position: 0 100%;
background-repeat: repeat-x;
backface-visibility: hidden;
contain: layout paint style;
transform: translate3d(0, 0, 0);
will-change: transform;
animation: poWaveBack var(--po-wave-speed) linear infinite;
}
/* front wave: 400px tile drifting right */
#root::before {
content: "";
transform-origin: 0 0;
position: fixed;
left: -400px;
right: 0;
bottom: 0;
height: var(--po-sea-height);
z-index: -2;
pointer-events: none;
opacity: var(--po-sea-opacity);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='150' viewBox='0 0 400 150' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffb3dc' stop-opacity='.42'/%3E%3Cstop offset='1' stop-color='%238e2f87' stop-opacity='.7'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M-400 90C-300 58 -100 122 0 90C100 58 300 122 400 90C500 58 700 122 800 90V150H-400Z' fill='url(%23g)'/%3E%3Cpath d='M-400 90C-300 58 -100 122 0 90C100 58 300 122 400 90C500 58 700 122 800 90' fill='none' stroke='%23ffe3f1' stroke-opacity='.55' stroke-width='2.4'/%3E%3C/svg%3E");
background-size: 400px 100%;
background-position: 0 100%;
background-repeat: repeat-x;
backface-visibility: hidden;
contain: layout paint style;
transform: translate3d(0, 0, 0);
will-change: transform;
animation: poWaveFront var(--po-wave-speed) linear infinite;
}
/* seabed strip: starfish, shells, hearts, coral (does not move) */
#root::after {
content: "";
position: fixed;
left: 0;
right: 0;
bottom: 0;
height: var(--po-sea-height);
z-index: -1;
pointer-events: none;
opacity: var(--po-sea-opacity);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='150' viewBox='0 0 900 150'%3E%3Cpolygon points='110.0,102.0 115.9,115.8 130.9,117.2 119.6,127.1 122.9,141.8 110.0,134.1 97.1,141.8 100.4,127.1 89.1,117.2 104.1,115.8' fill='%23ff9ccb' stroke='%23ff9ccb' stroke-width='6.2' stroke-linejoin='round'/%3E%3Ccircle cx='110.0' cy='111.9' r='1.5' fill='%23c2468a' fill-opacity='.7'/%3E%3Ccircle cx='121.5' cy='120.3' r='1.5' fill='%23c2468a' fill-opacity='.7'/%3E%3Ccircle cx='117.1' cy='133.8' r='1.5' fill='%23c2468a' fill-opacity='.7'/%3E%3Ccircle cx='102.9' cy='133.8' r='1.5' fill='%23c2468a' fill-opacity='.7'/%3E%3Ccircle cx='98.5' cy='120.3' r='1.5' fill='%23c2468a' fill-opacity='.7'/%3E%3Cpolygon points='640.0,115.0 644.1,124.4 654.3,125.4 646.6,132.1 648.8,142.1 640.0,136.9 631.2,142.1 633.4,132.1 625.7,125.4 635.9,124.4' fill='%23ffb3dc' stroke='%23ffb3dc' stroke-width='4.2' stroke-linejoin='round'/%3E%3Ccircle cx='640.0' cy='121.8' r='1.1' fill='%23c2468a' fill-opacity='.7'/%3E%3Ccircle cx='647.8' cy='127.5' r='1.1' fill='%23c2468a' fill-opacity='.7'/%3E%3Ccircle cx='644.8' cy='136.7' r='1.1' fill='%23c2468a' fill-opacity='.7'/%3E%3Ccircle cx='635.2' cy='136.7' r='1.1' fill='%23c2468a' fill-opacity='.7'/%3E%3Ccircle cx='632.2' cy='127.5' r='1.1' fill='%23c2468a' fill-opacity='.7'/%3E%3Cpath d='M308 132 Q304 106 330 110 Q356 106 352 132 Q330 142 308 132z' fill='%23ffd6ec'/%3E%3Cpath d='M330 140 L312 120' stroke='%23e879b0' stroke-width='1.6' stroke-linecap='round' fill='none' stroke-opacity='.7'/%3E%3Cpath d='M330 140 L321 120' stroke='%23e879b0' stroke-width='1.6' stroke-linecap='round' fill='none' stroke-opacity='.7'/%3E%3Cpath d='M330 140 L330 120' stroke='%23e879b0' stroke-width='1.6' stroke-linecap='round' fill='none' stroke-opacity='.7'/%3E%3Cpath d='M330 140 L339 120' stroke='%23e879b0' stroke-width='1.6' stroke-linecap='round' fill='none' stroke-opacity='.7'/%3E%3Cpath d='M330 140 L348 120' stroke='%23e879b0' stroke-width='1.6' stroke-linecap='round' fill='none' stroke-opacity='.7'/%3E%3Crect x='321' y='136' width='18' height='6' rx='3' fill='%23ffd6ec'/%3E%3Cpath d='M774.16 134.08 Q771.28 115.36 790 118.24 Q808.72 115.36 805.84 134.08 Q790 141.28 774.16 134.08z' fill='%23ffc2e2'/%3E%3Cpath d='M790 139.84 L777.04 125.44' stroke='%23e879b0' stroke-width='1.152' stroke-linecap='round' fill='none' stroke-opacity='.7'/%3E%3Cpath d='M790 139.84 L783.52 125.44' stroke='%23e879b0' stroke-width='1.152' stroke-linecap='round' fill='none' stroke-opacity='.7'/%3E%3Cpath d='M790 139.84 L790.0 125.44' stroke='%23e879b0' stroke-width='1.152' stroke-linecap='round' fill='none' stroke-opacity='.7'/%3E%3Cpath d='M790 139.84 L796.48 125.44' stroke='%23e879b0' stroke-width='1.152' stroke-linecap='round' fill='none' stroke-opacity='.7'/%3E%3Cpath d='M790 139.84 L802.96 125.44' stroke='%23e879b0' stroke-width='1.152' stroke-linecap='round' fill='none' stroke-opacity='.7'/%3E%3Crect x='783.52' y='136.96' width='12.959999999999999' height='4.32' rx='2.16' fill='%23ffc2e2'/%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.4C.9 8.2 3 4.5 6.4 4.5c2.2 0 3.7 1.2 5.6 3.3 1.9-2.1 3.4-3.3 5.6-3.3 3.4 0 5.5 3.7 4 7.1C19.5 16.4 12 21 12 21z' fill='%23ff7eb9' fill-opacity='0.85' transform='translate(225 112) rotate(-10 12.0 12.0) scale(1.0)'/%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.4C.9 8.2 3 4.5 6.4 4.5c2.2 0 3.7 1.2 5.6 3.3 1.9-2.1 3.4-3.3 5.6-3.3 3.4 0 5.5 3.7 4 7.1C19.5 16.4 12 21 12 21z' fill='%23ffb3dc' fill-opacity='0.85' transform='translate(500 118) rotate(12 9.600000000000001 9.600000000000001) scale(0.8)'/%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.4C.9 8.2 3 4.5 6.4 4.5c2.2 0 3.7 1.2 5.6 3.3 1.9-2.1 3.4-3.3 5.6-3.3 3.4 0 5.5 3.7 4 7.1C19.5 16.4 12 21 12 21z' fill='%23ff9ccb' fill-opacity='0.8' transform='translate(870 110) rotate(-6 8.399999999999999 8.399999999999999) scale(0.7)'/%3E%3Cpath d='M452 150c-6-30 8-44 2-72M452 110c10-8 18-20 16-34M455 90c-10-6-18-18-14-32' stroke='%23ff8fc7' stroke-opacity='.7' stroke-width='5' stroke-linecap='round' fill='none'/%3E%3Ccircle cx='470' cy='70' r='6' fill='%23ffd6ec' fill-opacity='.85'/%3E%3Ccircle cx='438' cy='58' r='5' fill='%23ffd6ec' fill-opacity='.85'/%3E%3Ccircle cx='456' cy='48' r='4' fill='%23fff' fill-opacity='.9'/%3E%3C/svg%3E");
background-size: 900px 150px;
background-position: 0 100%;
background-repeat: repeat-x;
}
/* keep it working when a wallpaper sets [data-chat-bg] on <html> */
[data-chat-bg] {
background:
radial-gradient(760px 480px at 50% -6%, rgba(255, 126, 185, 0.34), transparent 64%),
radial-gradient(560px 460px at 4% 92%, rgba(255, 126, 185, 0.22), transparent 70%),
linear-gradient(180deg, var(--po-sea-top) 0%, var(--po-sea-mid) 52%, var(--po-sea-deep) 100%) !important;
}
@keyframes poRise {
from { transform: translate3d(0, 0, 0) rotate(0.001deg); }
to { transform: translate3d(0, -840px, 0) rotate(0.001deg); }
}
/* the two waves drift in opposite directions (GPU-composited) */
@keyframes poWaveBack {
from { transform: translate3d(0, 0, 0) rotate(0.001deg); }
to { transform: translate3d(-800px, 0, 0) rotate(0.001deg); }
}
@keyframes poWaveFront {
from { transform: translate3d(0, 0, 0) rotate(0.001deg); }
to { transform: translate3d(400px, 0, 0) rotate(0.001deg); }
}
/* soft pulse used by little decorations */
@keyframes poBob {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-4px) rotate(4deg); }
}
/* up-and-down only (no rotation), so the corner decorations stay inside the message panel */
@keyframes poCornerBob {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-2px); }
}
@keyframes poBeat {
0%, 100% { transform: scale(1); }
45% { transform: scale(1.14); }
60% { transform: scale(0.98); }
}
/* respect the OS "reduce motion" setting */
@media (prefers-reduced-motion: reduce) {
body::before,
body::after,
#root::before,
#root::after,
[data-component="MessageContent"]::after,
[data-component="BubbleMessage"]::after,
[data-component="InputArea"]::before,
[data-component="InputArea"] [class*="_sendBtn_"] {
animation: none !important;
}
}
/* ─────────────────────────────────────────────────────────
VIEWPORT DRAWER: frosted rose glass
───────────────────────────────────────────────────────── */
[class*="_wrapper_"]:has([data-spindle-mount="sidebar"]) {
background: transparent;
--lcs-glass-bg: var(--po-glass);
--lcs-glass-bg-hover: var(--po-glass-hover);
}
[class*="_drawer_"]:has([data-spindle-mount="sidebar"]) {
background: transparent;
}
[class*="_drawerTab_"] {
background: var(--po-drawer-toggle);
backdrop-filter: blur(var(--po-blur));
-webkit-backdrop-filter: blur(var(--po-blur));
border-color: var(--po-glass-border);
}
[data-spindle-mount="sidebar"] {
background: var(--po-drawer-icon-strip);
backdrop-filter: blur(var(--po-blur));
-webkit-backdrop-filter: blur(var(--po-blur));
}
[data-spindle-mount="sidebar"] [class*="_tabBtnActive_"][class*="_tabBtnActive_"] {
background: var(--po-tab-active);
}
[data-spindle-mount="sidebar"] [class*="_tabBtn_"]:hover {
background: var(--po-tab-hover);
}
[class*="_drawer_"]:has([data-spindle-mount="sidebar"]) > [class*="_panel_"] {
background: var(--po-drawer-panel);
backdrop-filter: blur(var(--po-blur));
-webkit-backdrop-filter: blur(var(--po-blur));
border-color: var(--po-glass-border);
}
[class*="_panelContent_"],
[class*="_panelContentFull_"] {
background: transparent;
}
/* inner tab panels: selective transparency so the glass shows through */
[class*="_panelContent_"] > div,
[class*="_panelContentFull_"] > div,
[class*="_panelContent_"] [class*="_layout_"],
[class*="_panelContentFull_"] [class*="_layout_"],
[class*="_panelContent_"] [class*="_scrollArea_"],
[class*="_panelContentFull_"] [class*="_scrollArea_"],
[class*="_panelContent_"] [class*="_section_"],
[class*="_panelContent_"] [class*="_group_"],
[class*="_panelContent_"] [class*="_card_"],
[class*="_panelContent_"] [class*="_emptyState_"],
[class*="_panelContentFull_"] [class*="_section_"],
[class*="_panelContentFull_"] [class*="_group_"],
[class*="_panelContentFull_"] [class*="_card_"],
[class*="_panelContentFull_"] [class*="_emptyState_"],
[class*="_accordionSection_"],
[class*="_accordionBody_"],
[class*="_accordionBodyGen_"] {
background: transparent;
}
/* panel header: pink glow + tiled hearts & bubbles */
[class*="_drawer_"]:has([data-spindle-mount="sidebar"]) [class*="_panelHeader_"] {
position: relative;
isolation: isolate;
overflow: hidden;
background: linear-gradient(135deg, rgba(255, 126, 185, 0.26), rgba(201, 167, 255, 0.12));
}
[class*="_drawer_"]:has([data-spindle-mount="sidebar"]) [class*="_panelHeader_"]::before {
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='60' viewBox='0 0 90 60'%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.4C.9 8.2 3 4.5 6.4 4.5c2.2 0 3.7 1.2 5.6 3.3 1.9-2.1 3.4-3.3 5.6-3.3 3.4 0 5.5 3.7 4 7.1C19.5 16.4 12 21 12 21z' fill='%23ffc2e2' fill-opacity='0.35' transform='translate(8 10) rotate(-10 7.199999999999999 7.199999999999999) scale(0.6)'/%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.4C.9 8.2 3 4.5 6.4 4.5c2.2 0 3.7 1.2 5.6 3.3 1.9-2.1 3.4-3.3 5.6-3.3 3.4 0 5.5 3.7 4 7.1C19.5 16.4 12 21 12 21z' fill='%23ffc2e2' fill-opacity='0.3' transform='translate(58 34) rotate(10 6.0 6.0) scale(0.5)'/%3E%3Ccircle cx='40' cy='18' r='5' fill='%23ffd6ec' fill-opacity='0.048' stroke='%23ffd6ec' stroke-opacity='0.4' stroke-width='1.6'/%3E%3Cpath d='M37.25 17.5a3.0 3.0 0 0 1 2.5 -2.5' fill='none' stroke='%23fff' stroke-opacity='0.4' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='76' cy='12' r='3' fill='%23ffd6ec' fill-opacity='0.048' stroke='%23ffd6ec' stroke-opacity='0.4' stroke-width='1.6'/%3E%3Cpath d='M74.35 11.7a1.7999999999999998 1.7999999999999998 0 0 1 1.5 -1.5' fill='none' stroke='%23fff' stroke-opacity='0.4' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M12 1c.8 6.2 4.8 10.2 11 11-6.2.8-10.2 4.8-11 11-.8-6.2-4.8-10.2-11-11 6.2-.8 10.2-4.8 11-11z' fill='%23fff' fill-opacity='0.6' transform='translate(24 38) scale(0.25)'/%3E%3C/svg%3E");
background-size: 90px 60px;
opacity: 0.75;
z-index: 0;
pointer-events: none;
}
[class*="_drawer_"]:has([data-spindle-mount="sidebar"]) [class*="_panelTitle_"],
[class*="_drawer_"]:has([data-spindle-mount="sidebar"]) [class*="_panelHeader_"] button,
[class*="_drawer_"]:has([data-spindle-mount="sidebar"]) [class*="_panelHeader_"] svg {
position: relative;
z-index: 1;
}
/* ─────────────────────────────────────────────────────────
MODALS: frosted rose glass
───────────────────────────────────────────────────────── */
[class*="_modal_"] {
background: var(--po-modal);
border: 1.5px solid var(--po-glass-border);
border-radius: calc(var(--po-radius) + 4px);
box-shadow: 0 18px 60px rgba(20, 4, 30, 0.5), 0 0 40px rgba(255, 105, 180, 0.14);
}
[class*="_overlay_"],
[class*="_backdrop_"] {
background: var(--po-modal-backdrop);
backdrop-filter: blur(var(--po-blur));
-webkit-backdrop-filter: blur(var(--po-blur));
}
[class*="_modal_"]:has(> [class*="_body_"] > nav[class*="_sidebar_"]) [class*="_header_"],
[class*="_modal_"]:has(> [class*="_body_"] > nav[class*="_sidebar_"]) nav[class*="_sidebar_"],
[class*="_modal_"]:has(> [class*="_body_"] > nav[class*="_sidebar_"]) > [class*="_body_"] > [class*="_content_"] {
background: transparent;
}
[class*="_modal_"]:has(> [class*="_body_"] > nav[class*="_sidebar_"]) [class*="_navBtn_"]:hover {
background: var(--po-nav-hover);
}
[class*="_modal_"]:has(> [class*="_body_"] > nav[class*="_sidebar_"]) [class*="_navBtnActive_"][class*="_navBtnActive_"],
[class*="_modal_"]:has(> [class*="_body_"] > nav[class*="_sidebar_"]) [class*="_navBtnActive_"][class*="_navBtnActive_"]:hover {
background: var(--po-nav-active);
}
/* ─────────────────────────────────────────────────────────
CHAT AREA & HEADER
───────────────────────────────────────────────────────── */
[data-chatroom-region="header"] {
background: linear-gradient(180deg, hsla(310, 55%, 20%, 0.62), hsla(300, 50%, 14%, 0.42));
backdrop-filter: blur(var(--po-blur));
-webkit-backdrop-filter: blur(var(--po-blur));
border-bottom: 1.5px solid var(--po-glass-border);
}
[data-chatroom-region="body"],
[data-lumiverse-surface="chat-body"] {
background: transparent !important;
}
/* Base layout / knobs */
html body [data-component="MinimalMessage"]:is(
[data-part="user"],
[data-part="character"],
[data-part="streaming"][class*="_character_"]
) {
--me-avatar-width: var(--po-avatar-width-char);
--me-avatar-height: var(--po-avatar-height-char);
--me-avatar-sticky-top: var(--po-avatar-sticky-top);
--me-rail-gap: clamp(12px, 1.4vw, 24px);
--me-card-pad-x: 0px;
--me-card-pad-y: 0px;
--me-content-pad: clamp(16px, 1.4vw, 24px);
--me-img-scale: var(--po-img-scale);
--me-img-x: var(--po-img-x);
--me-img-y: var(--po-img-y);
--me-content-glass-bg: var(--po-content-glass);
--me-content-glass-border: var(--po-glass-border);
--me-content-glass-blur: var(--po-content-blur);
--me-content-glass-radius: var(--po-content-radius);
--me-content-glass-shadow: 0 10px 28px rgba(20, 4, 30, 0.28), 0 0 30px var(--po-card-glow);
--me-grid-template: var(--me-avatar-width) minmax(0, 1fr);
--me-message-padding: 0 clamp(16px, 1.5vw, 24px) clamp(20px, 2vw, 32px) 0;
--me-avatar-column: 1;
--me-bubble-column: 2;
--me-avatar-justify: start;
position: relative !important;
display: grid !important;
grid-template-columns: var(--me-grid-template) !important;
column-gap: var(--me-rail-gap) !important;
align-items: start !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
padding: var(--me-message-padding) !important;
box-sizing: border-box !important;
overflow: visible !important;
contain: none !important;
transform: none !important;
font-family: var(--po-font) !important;
background: transparent !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* user messages: portrait on the right */
html body [data-component="MinimalMessage"][data-part="user"][data-part="user"][data-part="user"] {
--me-avatar-width: var(--po-avatar-width-user);
--me-avatar-height: var(--po-avatar-height-user);
--me-grid-template: minmax(0, 1fr) var(--me-avatar-width);
--me-message-padding: 0 0 clamp(20px, 2vw, 32px) clamp(16px, 1.5vw, 24px);
--me-avatar-column: 2;
--me-bubble-column: 1;
--me-avatar-justify: end;
--me-content-glass-bg: var(--po-content-glass-user);
}
/* stock card rails off (hover keeps the layout calm) */
html body [data-component="MinimalMessage"]::before,
html body [data-component="MinimalMessage"]::after,
html body [data-component="MinimalMessage"][class*="_card_"]::before,
html body [data-component="MinimalMessage"][class*="_card_"]::after,
html body [data-component="MinimalMessage"][class*="_user_"]::before,
html body [data-component="MinimalMessage"][class*="_user_"]::after,
html body [data-component="MinimalMessage"][class*="_character_"]::before,
html body [data-component="MinimalMessage"][class*="_character_"]::after {
content: none !important;
display: none !important;
}
html body [data-component="MinimalMessage"]:hover {
background: transparent !important;
box-shadow: none !important;
}
/* sticky prep */
[data-chat-scroll="true"] [data-virtual-index],
[data-chat-scroll="true"] [data-item-type="message"],
html body [data-component="MinimalMessage"] {
overflow: visible !important;
}
/* ── Sticky portrait rail ── */
html body [data-component="MinimalMessage"]:is(
[data-part="user"],
[data-part="character"],
[data-part="streaming"][class*="_character_"]
) > [class*="_avatar_"] {
grid-column: var(--me-avatar-column) !important;
grid-row: 1 / span 2 !important;
justify-self: var(--me-avatar-justify) !important;
position: sticky !important;
top: var(--me-avatar-sticky-top, 72px) !important;
align-self: start !important;
width: var(--me-avatar-width) !important;
min-width: var(--me-avatar-width) !important;
max-width: var(--me-avatar-width) !important;
height: var(--me-avatar-height) !important;
min-height: var(--me-avatar-height) !important;
max-height: var(--me-avatar-height) !important;
aspect-ratio: auto !important;
margin: 0 !important;
z-index: 12 !important;
overflow: hidden !important;
contain: paint !important;
isolation: isolate !important;
border: 0 !important;
border-radius: var(--po-portrait-radius) !important;
background: var(--po-portrait-backing) !important;
box-shadow: none !important;
-webkit-mask-composite: source-in !important;
mask-composite: intersect !important;
-webkit-mask-repeat: no-repeat !important;
mask-repeat: no-repeat !important;
-webkit-mask-size: 100% 100% !important;
mask-size: 100% 100% !important;
}
/* Masks: portrait fades into the sea on the side facing the text and at the bottom */
html body [data-component="MinimalMessage"]:is(
[data-part="character"],
[data-part="streaming"][class*="_character_"]
) > [class*="_avatar_"] {
-webkit-mask-image:
linear-gradient(to right, #000 0%, #000 var(--po-portrait-fade), rgba(0,0,0,0) 100%),
linear-gradient(to bottom, #000 0%, #000 var(--po-portrait-fade), rgba(0,0,0,0) 100%) !important;
mask-image:
linear-gradient(to right, #000 0%, #000 var(--po-portrait-fade), rgba(0,0,0,0) 100%),
linear-gradient(to bottom, #000 0%, #000 var(--po-portrait-fade), rgba(0,0,0,0) 100%) !important;
}
html body [data-component="MinimalMessage"][data-part="user"] > [class*="_avatar_"] {
-webkit-mask-image:
linear-gradient(to left, #000 0%, #000 var(--po-portrait-fade), rgba(0,0,0,0) 100%),
linear-gradient(to bottom, #000 0%, #000 var(--po-portrait-fade), rgba(0,0,0,0) 100%) !important;
mask-image:
linear-gradient(to left, #000 0%, #000 var(--po-portrait-fade), rgba(0,0,0,0) 100%),
linear-gradient(to bottom, #000 0%, #000 var(--po-portrait-fade), rgba(0,0,0,0) 100%) !important;
}
/* nested avatar wrappers fill the rail */
html body [data-component="MinimalMessage"] > [class*="_avatar_"],
html body [data-component="MinimalMessage"] > [class*="_avatar_"] > *,
html body [data-component="MinimalMessage"] > [class*="_avatar_"] div,
html body [data-component="MinimalMessage"] > [class*="_avatar_"] picture {
overflow: hidden !important;
width: 100% !important;
height: 100% !important;
min-width: 100% !important;
min-height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
aspect-ratio: auto !important;
box-sizing: border-box !important;
}
html body [data-component="MinimalMessage"] > [class*="_avatar_"] img {
display: block !important;
width: 100% !important;
height: 100% !important;
min-width: 100% !important;
min-height: 100% !important;
max-width: none !important;
max-height: none !important;
object-fit: cover !important;
object-position: var(--me-img-x) var(--me-img-y) !important;
transform: scale(var(--me-img-scale)) !important;
transform-origin: var(--me-img-x) var(--me-img-y) !important;
opacity: 1 !important;
filter: saturate(1.08) contrast(1.02) brightness(1.02) hue-rotate(-6deg) !important;
border-radius: inherit !important;
box-sizing: border-box !important;
}
/* pink tide over the foot of the portrait + a faint rosy wash (no see-through effects) */
html body [data-component="MinimalMessage"] > [class*="_avatar_"]::after {
content: "" !important;
position: absolute !important;
inset: 0 !important;
z-index: 3 !important;
pointer-events: none !important;
background-image:
linear-gradient(to top, rgba(255, 105, 180, 0.30) 0%, rgba(255, 105, 180, 0) 34%),
linear-gradient(160deg, rgba(255, 179, 220, 0.10), transparent 55%) !important;
opacity: var(--po-portrait-decor);
}
/* ── Bubble lane ── */
html body [data-component="MinimalMessage"]:is(
[data-part="user"],
[data-part="character"],
[data-part="streaming"][class*="_character_"]
) > [class*="_bubble_"] {
grid-column: var(--me-bubble-column) !important;
position: relative !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
background: transparent !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
}
/* ── Header: centred name with a little heart rule under it ── */
html body [data-component="MinimalMessage"] [class*="_header_"] {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 0.35rem !important;
margin: 0 !important;
padding: 10px var(--me-content-pad) 14px var(--me-content-pad) !important;
min-height: 0 !important;
width: 100% !important;
text-align: center !important;
box-sizing: border-box !important;
}
html body [data-component="MinimalMessage"] [class*="_name_"] {
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
text-align: center !important;
font-family: var(--po-font) !important;
font-weight: 700 !important;
font-size: clamp(1.3rem, 1.8vw, 1.9rem) !important;
line-height: 1.1 !important;
color: var(--po-name-color) !important;
text-shadow: 0 0 18px color-mix(in srgb, var(--po-name-color) 45%, transparent);
}
html body [data-component="MinimalMessage"] [class*="_nameUser_"] {
color: var(--po-font-color) !important;
}
html body [data-component="MinimalMessage"] [class*="_name_"]::after {
content: "";
display: block;
width: 100%;
height: 16px;
margin-top: 6px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='16' viewBox='0 0 44 16'%3E%3Cpath d='M0 8H12M32 8H44' stroke='%23ff9ccb' stroke-opacity='.55' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.4C.9 8.2 3 4.5 6.4 4.5c2.2 0 3.7 1.2 5.6 3.3 1.9-2.1 3.4-3.3 5.6-3.3 3.4 0 5.5 3.7 4 7.1C19.5 16.4 12 21 12 21z' fill='%23ff7eb9' fill-opacity='1' transform='translate(16 2) rotate(0 6.0 6.0) scale(0.5)'/%3E%3C/svg%3E") center / auto 16px no-repeat;
opacity: 0.9;
}
html body [data-component="MinimalMessage"] [class*="_metaPill_"] {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
align-self: center !important;
width: fit-content !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0.12rem 0.7rem !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
font-family: var(--po-font-mono) !important;
font-size: calc(0.9rem * var(--po-meta-font-scale)) !important;
font-weight: 700 !important;
line-height: 1 !important;
color: var(--po-font-color-soft) !important;
opacity: 0.8 !important;
}
/* ── Content / media: rose-glass panel with a heart on the corner ── */
html body [data-component="MinimalMessage"] [data-component="MessageContent"] {
position: relative !important;
isolation: isolate !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 9px var(--me-content-pad) var(--me-content-pad) var(--me-content-pad) !important; /* first number = gap above the text: bigger = lower */
border-radius: var(--me-content-glass-radius) !important;
box-sizing: border-box !important;
overflow: visible !important; /* lets the heart perch above the panel */
color: var(--po-message-color) !important;
font-family: var(--po-font) !important;
text-shadow: var(--po-text-glow);
text-align: justify !important;
hyphens: auto;
}
html body [data-component="MinimalMessage"] [data-component="MessageContent"]::before {
content: "" !important;
position: absolute !important;
inset: 0 !important;
z-index: -1 !important;
border: 1.5px solid var(--me-content-glass-border) !important;
border-radius: inherit !important;
background: var(--me-content-glass-bg) !important;
box-shadow:
inset 0 1px 0 rgba(255, 220, 240, 0.12),
var(--me-content-glass-shadow) !important;
backdrop-filter: blur(var(--me-content-glass-blur)) saturate(115%) !important;
-webkit-backdrop-filter: blur(var(--me-content-glass-blur)) saturate(115%) !important;
pointer-events: none !important;
}
/* heart on top + sea-life in the bottom corners: all drawn by this one layer, which stretches over the whole panel.
Turn the corner decorations off with --po-msg-decor: 0; (in :root) */
:root { --po-msg-decor: 1; }
html body [data-component="MinimalMessage"] [data-component="MessageContent"]::after {
content: "";
position: absolute;
top: -26px; /* heart sits ABOVE the message box */
left: 0;
right: 0;
bottom: 0;
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='30' viewBox='0 0 64 30'%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.4C.9 8.2 3 4.5 6.4 4.5c2.2 0 3.7 1.2 5.6 3.3 1.9-2.1 3.4-3.3 5.6-3.3 3.4 0 5.5 3.7 4 7.1C19.5 16.4 12 21 12 21z' fill='%23ff7eb9' fill-opacity='0.95' transform='translate(34 3) rotate(10 11.399999999999999 11.399999999999999) scale(0.95)'/%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.4C.9 8.2 3 4.5 6.4 4.5c2.2 0 3.7 1.2 5.6 3.3 1.9-2.1 3.4-3.3 5.6-3.3 3.4 0 5.5 3.7 4 7.1C19.5 16.4 12 21 12 21z' fill='%23ffc2e2' fill-opacity='0.9' transform='translate(12 12) rotate(-12 6.6000000000000005 6.6000000000000005) scale(0.55)'/%3E%3Cpath d='M12 1c.8 6.2 4.8 10.2 11 11-6.2.8-10.2 4.8-11 11-.8-6.2-4.8-10.2-11-11 6.2-.8 10.2-4.8 11-11z' fill='%23fff' fill-opacity='0.95' transform='translate(54 2) scale(0.38)'/%3E%3C/svg%3E") right calc(var(--me-content-glass-radius) * 0.5) top 0 / 64px 30px no-repeat,
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='28' viewBox='0 0 56 28'%3E%3Cpolygon points='15.0%2C4.0 17.7%2C11.3 25.5%2C11.6 19.4%2C16.4 21.5%2C23.9 15.0%2C19.6 8.5%2C23.9 10.6%2C16.4 4.5%2C11.6 12.3%2C11.3' fill='%23ff9ccb' stroke='%23ff9ccb' stroke-width='3' stroke-linejoin='round'/%3E%3Ccircle cx='15' cy='15' r='1.1' fill='%23c2468a' fill-opacity='.7'/%3E%3Ccircle cx='11.5' cy='19' r='.9' fill='%23c2468a' fill-opacity='.7'/%3E%3Ccircle cx='19' cy='19.5' r='.9' fill='%23c2468a' fill-opacity='.7'/%3E%3Ccircle cx='33' cy='17' r='4' fill='%23ffd6ec' fill-opacity='.1' stroke='%23ffd6ec' stroke-opacity='.8' stroke-width='1.3'/%3E%3Cpath d='M30.6 16a2.6 2.6 0 0 1 2.4-2.2' fill='none' stroke='%23fff' stroke-opacity='.8' stroke-width='1.2' stroke-linecap='round'/%3E%3Ccircle cx='42' cy='9' r='2.6' fill='%23ffd6ec' fill-opacity='.1' stroke='%23ffd6ec' stroke-opacity='.75' stroke-width='1.2'/%3E%3Ccircle cx='46' cy='20' r='1.8' fill='none' stroke='%23ffd6ec' stroke-opacity='.7' stroke-width='1.1'/%3E%3Cpath d='M12 21C5 15 2 11.5 2 8c0-3 2.2-5 4.8-5 2.2 0 4.1 1.2 5.2 3.2C13.1 4.2 15 3 17.2 3 19.8 3 22 5 22 8c0 3.5-3 7-10 13z' fill='%23ff7eb9' fill-opacity='.9' transform='translate(30 1) scale(.34)'/%3E%3Cpath d='M12 1c.8 6.2 4.8 10.2 11 11-6.2.8-10.2 4.8-11 11-.8-6.2-4.8-10.2-11-11 6.2-.8 10.2-4.8 11-11z' fill='%23fff' fill-opacity='.9' transform='translate(48 2) scale(.4)'/%3E%3C/svg%3E") left 4px bottom 1px / 54px 27px no-repeat,
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='28' viewBox='0 0 56 28'%3E%3Cpath d='M30 13C30 3 50 3 50 13Z' fill='%23ffb3dc' stroke='%23ff7eb9' stroke-width='1.1' stroke-linejoin='round'/%3E%3Cpath d='M30 13h20v2.2a2.5 2.5 0 0 1-5 0a2.5 2.5 0 0 1-5 0a2.5 2.5 0 0 1-5 0a2.5 2.5 0 0 1-5 0z' fill='%23ffc2e2' stroke='%23ff7eb9' stroke-width='1.1' stroke-linejoin='round'/%3E%3Cg fill='none' stroke='%23ff9ccb' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M34 17c-2 3 2 4 0 8'/%3E%3Cpath d='M40 17c-2 3 2 5 0 9'/%3E%3Cpath d='M46 17c-2 3 2 4 0 8'/%3E%3C/g%3E%3Ccircle cx='35' cy='8.5' r='1.3' fill='%23fff' fill-opacity='.9'/%3E%3Cpath d='M12 21C5 15 2 11.5 2 8c0-3 2.2-5 4.8-5 2.2 0 4.1 1.2 5.2 3.2C13.1 4.2 15 3 17.2 3 19.8 3 22 5 22 8c0 3.5-3 7-10 13z' fill='%23c9a7ff' fill-opacity='.9' transform='translate(11 11) scale(.5)'/%3E%3Cpath d='M12 21C5 15 2 11.5 2 8c0-3 2.2-5 4.8-5 2.2 0 4.1 1.2 5.2 3.2C13.1 4.2 15 3 17.2 3 19.8 3 22 5 22 8c0 3.5-3 7-10 13z' fill='%23ff7eb9' fill-opacity='.85' transform='translate(3 3) scale(.36) rotate(-10 12 12)'/%3E%3Ccircle cx='20' cy='6' r='3' fill='%23ffd6ec' fill-opacity='.1' stroke='%23ffd6ec' stroke-opacity='.8' stroke-width='1.2'/%3E%3Ccircle cx='25' cy='20' r='2' fill='none' stroke='%23ffd6ec' stroke-opacity='.7' stroke-width='1.1'/%3E%3Cpath d='M12 1c.8 6.2 4.8 10.2 11 11-6.2.8-10.2 4.8-11 11-.8-6.2-4.8-10.2-11-11 6.2-.8 10.2-4.8 11-11z' fill='%23fff' fill-opacity='.9' transform='translate(2 17) scale(.38)'/%3E%3C/svg%3E") right 4px bottom 1px / 54px 27px no-repeat;
pointer-events: none;
opacity: 0.95;
animation: poCornerBob 4.5s ease-in-out infinite;
}
html body [data-component="MinimalMessage"][data-part="user"] [data-component="MessageContent"]::after {
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='30' viewBox='0 0 64 30'%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.4C.9 8.2 3 4.5 6.4 4.5c2.2 0 3.7 1.2 5.6 3.3 1.9-2.1 3.4-3.3 5.6-3.3 3.4 0 5.5 3.7 4 7.1C19.5 16.4 12 21 12 21z' fill='%23ff7eb9' fill-opacity='0.95' transform='translate(34 3) rotate(10 11.399999999999999 11.399999999999999) scale(0.95)'/%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.4C.9 8.2 3 4.5 6.4 4.5c2.2 0 3.7 1.2 5.6 3.3 1.9-2.1 3.4-3.3 5.6-3.3 3.4 0 5.5 3.7 4 7.1C19.5 16.4 12 21 12 21z' fill='%23ffc2e2' fill-opacity='0.9' transform='translate(12 12) rotate(-12 6.6000000000000005 6.6000000000000005) scale(0.55)'/%3E%3Cpath d='M12 1c.8 6.2 4.8 10.2 11 11-6.2.8-10.2 4.8-11 11-.8-6.2-4.8-10.2-11-11 6.2-.8 10.2-4.8 11-11z' fill='%23fff' fill-opacity='0.95' transform='translate(54 2) scale(0.38)'/%3E%3C/svg%3E") left calc(var(--me-content-glass-radius) * 0.5) top 0 / 64px 30px no-repeat,
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='28' viewBox='0 0 56 28'%3E%3Cpolygon points='15.0%2C4.0 17.7%2C11.3 25.5%2C11.6 19.4%2C16.4 21.5%2C23.9 15.0%2C19.6 8.5%2C23.9 10.6%2C16.4 4.5%2C11.6 12.3%2C11.3' fill='%23ff9ccb' stroke='%23ff9ccb' stroke-width='3' stroke-linejoin='round'/%3E%3Ccircle cx='15' cy='15' r='1.1' fill='%23c2468a' fill-opacity='.7'/%3E%3Ccircle cx='11.5' cy='19' r='.9' fill='%23c2468a' fill-opacity='.7'/%3E%3Ccircle cx='19' cy='19.5' r='.9' fill='%23c2468a' fill-opacity='.7'/%3E%3Ccircle cx='33' cy='17' r='4' fill='%23ffd6ec' fill-opacity='.1' stroke='%23ffd6ec' stroke-opacity='.8' stroke-width='1.3'/%3E%3Cpath d='M30.6 16a2.6 2.6 0 0 1 2.4-2.2' fill='none' stroke='%23fff' stroke-opacity='.8' stroke-width='1.2' stroke-linecap='round'/%3E%3Ccircle cx='42' cy='9' r='2.6' fill='%23ffd6ec' fill-opacity='.1' stroke='%23ffd6ec' stroke-opacity='.75' stroke-width='1.2'/%3E%3Ccircle cx='46' cy='20' r='1.8' fill='none' stroke='%23ffd6ec' stroke-opacity='.7' stroke-width='1.1'/%3E%3Cpath d='M12 21C5 15 2 11.5 2 8c0-3 2.2-5 4.8-5 2.2 0 4.1 1.2 5.2 3.2C13.1 4.2 15 3 17.2 3 19.8 3 22 5 22 8c0 3.5-3 7-10 13z' fill='%23ff7eb9' fill-opacity='.9' transform='translate(30 1) scale(.34)'/%3E%3Cpath d='M12 1c.8 6.2 4.8 10.2 11 11-6.2.8-10.2 4.8-11 11-.8-6.2-4.8-10.2-11-11 6.2-.8 10.2-4.8 11-11z' fill='%23fff' fill-opacity='.9' transform='translate(48 2) scale(.4)'/%3E%3C/svg%3E") left 4px bottom 1px / 54px 27px no-repeat,
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='28' viewBox='0 0 56 28'%3E%3Cpath d='M30 13C30 3 50 3 50 13Z' fill='%23ffb3dc' stroke='%23ff7eb9' stroke-width='1.1' stroke-linejoin='round'/%3E%3Cpath d='M30 13h20v2.2a2.5 2.5 0 0 1-5 0a2.5 2.5 0 0 1-5 0a2.5 2.5 0 0 1-5 0a2.5 2.5 0 0 1-5 0z' fill='%23ffc2e2' stroke='%23ff7eb9' stroke-width='1.1' stroke-linejoin='round'/%3E%3Cg fill='none' stroke='%23ff9ccb' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M34 17c-2 3 2 4 0 8'/%3E%3Cpath d='M40 17c-2 3 2 5 0 9'/%3E%3Cpath d='M46 17c-2 3 2 4 0 8'/%3E%3C/g%3E%3Ccircle cx='35' cy='8.5' r='1.3' fill='%23fff' fill-opacity='.9'/%3E%3Cpath d='M12 21C5 15 2 11.5 2 8c0-3 2.2-5 4.8-5 2.2 0 4.1 1.2 5.2 3.2C13.1 4.2 15 3 17.2 3 19.8 3 22 5 22 8c0 3.5-3 7-10 13z' fill='%23c9a7ff' fill-opacity='.9' transform='translate(11 11) scale(.5)'/%3E%3Cpath d='M12 21C5 15 2 11.5 2 8c0-3 2.2-5 4.8-5 2.2 0 4.1 1.2 5.2 3.2C13.1 4.2 15 3 17.2 3 19.8 3 22 5 22 8c0 3.5-3 7-10 13z' fill='%23ff7eb9' fill-opacity='.85' transform='translate(3 3) scale(.36) rotate(-10 12 12)'/%3E%3Ccircle cx='20' cy='6' r='3' fill='%23ffd6ec' fill-opacity='.1' stroke='%23ffd6ec' stroke-opacity='.8' stroke-width='1.2'/%3E%3Ccircle cx='25' cy='20' r='2' fill='none' stroke='%23ffd6ec' stroke-opacity='.7' stroke-width='1.1'/%3E%3Cpath d='M12 1c.8 6.2 4.8 10.2 11 11-6.2.8-10.2 4.8-11 11-.8-6.2-4.8-10.2-11-11 6.2-.8 10.2-4.8 11-11z' fill='%23fff' fill-opacity='.9' transform='translate(2 17) scale(.38)'/%3E%3C/svg%3E") right 4px bottom 1px / 54px 27px no-repeat;
}
html body [data-component="MinimalMessage"] [data-component="MessageContent"] > [class*="_prose_"] {
position: relative !important;
z-index: 1 !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
box-sizing: border-box !important;
padding-top: 0 !important;
color: var(--po-message-color) !important;
font-family: var(--po-font) !important;
font-size: calc(1rem * var(--po-chat-font-scale)) !important;
line-height: 1.7 !important;
text-wrap: pretty;
}
html body [data-component="MinimalMessage"] [data-component="MessageContent"] :is(img, video, canvas, svg):not([class*="lucide"]) {
display: block !important;
width: auto !important;
max-width: 100% !important;
height: auto !important;
object-fit: contain !important;
border-radius: 16px !important;
border: 2px solid var(--po-card-border);
}
/* prose details */
[data-component="MessageContent"] [class*="_prose_"] :is(h1, h2, h3, h4) {
margin: 1.1em 0 0.45em 0;
color: var(--po-heading-color) !important;
font-family: var(--po-font) !important;
font-weight: 700;
line-height: 1.15;
}
[data-component="MessageContent"] [class*="_prose_"] h1 { font-size: 1.7rem; }
[data-component="MessageContent"] [class*="_prose_"] h2 { font-size: 1.45rem; }
[data-component="MessageContent"] [class*="_prose_"] h3 { font-size: 1.25rem; }
[data-component="MessageContent"] [class*="_prose_"] h4 { font-size: 1.1rem; color: var(--po-font-color-soft) !important; }
[data-component="MessageContent"] [class*="_prose_"] :is(p, ul, ol, blockquote, pre) {
margin-top: 0;
margin-bottom: 0.95em;
}
[data-component="MessageContent"] [class*="_prose_"] > :last-child { margin-bottom: 0; }
[data-component="MessageContent"] [class*="_prose_"] :is(em, [class*="_proseItalic_"]) {
color: var(--po-action-color) !important;
font-style: italic;
}
[data-component="MessageContent"] [class*="_prose_"] :is(strong, [class*="_proseBold_"]) {
color: var(--po-bold-color) !important;
font-weight: 700;
}
/* "dialogue" in quotes */
[data-component="MessageContent"] [class*="_prose_"] [class*="_proseDialogue_"] {
color: var(--po-dialogue-color) !important;
}
/* Coloured text from <font color="#hex"> (or inline colour styles) wins over the
dialogue / *italic* / bold colours. Without this, the quoted speech inside a
<font> tag was repainted by the dialogue colour and the custom colour was lost. */
[data-component="MessageContent"] [class*="_prose_"] :is(font[color], [style*="color"]) :is(em, strong, a, [class*="_proseItalic_"], [class*="_proseBold_"], [class*="_proseDialogue_"]) {
color: inherit !important;
}
[data-component="MessageContent"] [class*="_prose_"] :is(font[color], [style*="color"]) {
text-shadow: 0 0 12px color-mix(in srgb, currentColor 26%, transparent);
}
[data-component="MessageContent"] [class*="_prose_"] :is(a, a:visited) {
color: var(--po-link-color);
text-decoration: underline;
text-decoration-color: color-mix(in srgb, var(--po-link-color) 50%, transparent);
text-underline-offset: 0.18em;
}
/* little hearts for bullet points */
[data-component="MessageContent"] [class*="_prose_"] :is(ul, ol) { padding-left: 1.4em; }
[data-component="MessageContent"] [class*="_prose_"] li { margin: 0.28em 0; padding-left: 0.12em; }
[data-component="MessageContent"] [class*="_prose_"] ul > li::marker {
content: "♥ ";
color: var(--po-accent);
font-size: 0.85em;
}
[data-component="MessageContent"] [class*="_prose_"] ol > li::marker {
color: var(--po-accent);
font-weight: 700;
}
/* heart-quote blocks */
[data-component="MessageContent"] [class*="_prose_"] blockquote {
position: relative;
margin-left: 0;
padding: 10px 14px 10px 40px;
border: 0;
border-radius: 16px;
background: var(--po-quote-bg);
box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--po-accent) 30%, transparent);
text-align: left;
}
[data-component="MessageContent"] [class*="_prose_"] blockquote::before {
content: "";
position: absolute;
left: 11px;
top: 12px;
width: 20px;
height: 20px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.4C.9 8.2 3 4.5 6.4 4.5c2.2 0 3.7 1.2 5.6 3.3 1.9-2.1 3.4-3.3 5.6-3.3 3.4 0 5.5 3.7 4 7.1C19.5 16.4 12 21 12 21z' fill='%23ff7eb9' fill-opacity='0.9' transform='translate(1 1) rotate(-8 12 12) scale(1)'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* heart dividers */
[data-component="MessageContent"] [class*="_prose_"] hr {
border: 0;
height: 16px;
margin: 1.1em 0;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='16' viewBox='0 0 44 16'%3E%3Cpath d='M0 8H12M32 8H44' stroke='%23ff9ccb' stroke-opacity='.55' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.4C.9 8.2 3 4.5 6.4 4.5c2.2 0 3.7 1.2 5.6 3.3 1.9-2.1 3.4-3.3 5.6-3.3 3.4 0 5.5 3.7 4 7.1C19.5 16.4 12 21 12 21z' fill='%23ff7eb9' fill-opacity='1' transform='translate(16 2) rotate(0 6.0 6.0) scale(0.5)'/%3E%3C/svg%3E") center / auto 16px repeat-x;
opacity: 0.9;
}
/* code */
[data-component="MessageContent"] code:not(pre code) {
background: var(--po-code-bg);
border: 1px solid color-mix(in srgb, var(--po-accent) 28%, transparent);
border-radius: 0.5em;
padding: 0.08em 0.4em;
color: var(--po-accent-soft);
font-size: 0.9em;
}
[data-component="MessageContent"] [class*="_codeBlock_"],
[data-component="MessageContent"] pre {
background: var(--po-code-bg) !important;
border: 1.5px solid color-mix(in srgb, var(--po-accent) 26%, transparent);
border-radius: 16px;
overflow: hidden;
text-align: left;
}
[data-component="MessageContent"] [class*="_codeHeader_"] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
min-height: 34px;
padding: 7px 12px;
border-bottom: 1px solid color-mix(in srgb, var(--po-accent) 22%, transparent);
background: rgba(255, 126, 185, 0.08);
}
[data-component="MessageContent"] [class*="_codeLang_"] {
color: var(--po-accent-soft);
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
}
[data-component="MessageContent"] [class*="_codeCopy_"] {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.16rem 0.55rem;
border: 1px solid color-mix(in srgb, var(--po-accent) 28%, transparent);
border-radius: 999px;
background: rgba(255, 126, 185, 0.10);
color: var(--po-font-color-soft);
font-size: 0.72rem;
}
[data-component="MessageContent"] [class*="_codeCopy_"]:hover {
color: var(--po-font-color);
background: rgba(255, 126, 185, 0.22);
}
[data-component="MessageEditArea"] textarea {
font-family: var(--po-font) !important;
color: var(--po-message-color) !important;
background: var(--po-input-bg) !important;
border: 1.5px solid var(--po-input-border) !important;
border-radius: 16px !important;
}
/* ── Thinking lane: bubble-shaped reasoning pill + glass body ── */
html body [data-component="MinimalMessage"] [class*="_container_"] {
position: relative !important;
z-index: 6 !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 12px 0 0 0 !important;
padding: 0 var(--me-content-pad) var(--me-content-pad) var(--me-content-pad) !important;
box-sizing: border-box !important;
overflow: visible !important;
background: transparent !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
}
html body [data-component="MinimalMessage"] [class*="_container_"] > button[type="button"]:has(svg.lucide-brain) {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 0.45rem !important;
width: fit-content !important;
margin: 0 0 12px 0 !important;
padding: 0.35rem 0.8rem !important;
border: 1.5px solid var(--po-glass-border) !important;
border-radius: 999px !important;
background: color-mix(in srgb, var(--po-sea-deep) 70%, transparent) !important;
box-shadow: 0 8px 18px rgba(20, 4, 30, 0.22), 0 0 16px rgba(201, 167, 255, 0.14) !important;
backdrop-filter: blur(6px) saturate(115%) !important;
-webkit-backdrop-filter: blur(6px) saturate(115%) !important;
color: var(--po-lilac) !important;
font-size: 0.74rem !important;
opacity: 0.9 !important;
}
html body [data-component="MinimalMessage"] [class*="_container_"] > [class*="_bodyWrapperOpen_"] {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 0 16px 0 !important;
padding: 12px 16px !important;
box-sizing: border-box !important;
overflow: hidden !important;
border: 1.5px solid color-mix(in srgb, var(--po-lilac) 32%, transparent) !important;
border-radius: 20px !important;
background:
radial-gradient(circle at 12% 0%, rgba(201, 167, 255, 0.14), transparent 40%),
color-mix(in srgb, var(--po-sea-deep) 78%, transparent) !important;
box-shadow: 0 12px 32px rgba(20, 4, 30, 0.28) !important;
backdrop-filter: blur(7px) saturate(112%) !important;
-webkit-backdrop-filter: blur(7px) saturate(112%) !important;
color: var(--po-font-color-soft);
text-align: left;
}
/* ── Actions: appear on hover, tucked in the corner ── */
html body [data-component="MinimalMessage"] > [class*="_actionsWrap_"] {
position: absolute !important;
top: 10px !important;
right: 10px !important;
width: auto !important;
min-width: 0 !important;
max-width: max-content !important;
margin: 0 !important;
padding: 0 !important;
z-index: 30 !important;
opacity: 0 !important;
pointer-events: none !important;
transition: opacity 140ms ease !important;
}
html body [data-component="MinimalMessage"]:hover > [class*="_actionsWrap_"] {
opacity: 1 !important;
pointer-events: auto !important;
}
/* swipe controls & message action buttons */
[data-component="SwipeControls"] button,
[data-component="MinimalMessage"] button[data-hone-btn] {
border-radius: 999px;
transition: transform 0.15s ease, background 0.15s ease;
}
[data-component="MinimalMessage"] button[data-hone-btn]:hover {
background: var(--po-tab-hover);
transform: scale(1.08);
}
/* ── Mobile ── */
@media (max-width: 720px) {
html body [data-component="MinimalMessage"]:is(
[data-part="user"],
[data-part="character"],
[data-part="streaming"][class*="_character_"]
) {
--me-avatar-width: clamp(50px, 24vw, 112px);
--me-avatar-height: clamp(180px, 56vw, 340px);
--me-avatar-sticky-top: 58px;
--me-rail-gap: 12px;
--me-content-pad: 10px;
--me-img-scale: 1.04;
--me-content-glass-radius: 28px;
}
html body [data-component="MinimalMessage"]:is(
[data-part="character"],
[data-part="streaming"][class*="_character_"]
) {
--me-message-padding: 0 10px 18px 0;
}
html body [data-component="MinimalMessage"][data-part="user"][data-part="user"][data-part="user"] {
--me-message-padding: 0 0 18px 10px;
}
html body [data-component="MinimalMessage"] [class*="_header_"] {
padding: 8px var(--me-content-pad) 10px var(--me-content-pad) !important;
}
html body [data-component="MinimalMessage"] [class*="_name_"] {
font-size: clamp(1.15rem, 5.5vw, 1.45rem) !important;
}
html body [data-component="MinimalMessage"] > [class*="_actionsWrap_"] {
top: 6px !important;
right: 6px !important;
}
}
/* ─────────────────────────────────────────────────────────
CHAT INPUT AREA: rose glass pill with a heart ribbon
───────────────────────────────────────────────────────── */
[data-component="InputArea"] {
position: relative;
--lcs-glass-bg: var(--po-input-bg);
background: var(--po-input-bg);
border: 1.5px solid var(--po-input-border) !important;
border-radius: calc(var(--po-radius) + 6px) !important;
box-shadow: 0 8px 28px rgba(20, 4, 30, 0.38), 0 0 30px rgba(255, 105, 180, 0.16);
backdrop-filter: blur(var(--po-blur));
-webkit-backdrop-filter: blur(var(--po-blur));
}
[data-component="InputArea"]::before {
content: "";
position: absolute;
top: -22px;
left: 26px;
width: 120px;
height: 34px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='34' viewBox='0 0 120 34'%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.4C.9 8.2 3 4.5 6.4 4.5c2.2 0 3.7 1.2 5.6 3.3 1.9-2.1 3.4-3.3 5.6-3.3 3.4 0 5.5 3.7 4 7.1C19.5 16.4 12 21 12 21z' fill='%23ff7eb9' fill-opacity='0.95' transform='translate(8 8) rotate(-10 9.600000000000001 9.600000000000001) scale(0.8)'/%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.4C.9 8.2 3 4.5 6.4 4.5c2.2 0 3.7 1.2 5.6 3.3 1.9-2.1 3.4-3.3 5.6-3.3 3.4 0 5.5 3.7 4 7.1C19.5 16.4 12 21 12 21z' fill='%23ffb3dc' fill-opacity='0.95' transform='translate(34 4) rotate(8 12.0 12.0) scale(1.0)'/%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.4C.9 8.2 3 4.5 6.4 4.5c2.2 0 3.7 1.2 5.6 3.3 1.9-2.1 3.4-3.3 5.6-3.3 3.4 0 5.5 3.7 4 7.1C19.5 16.4 12 21 12 21z' fill='%23ff9ccb' fill-opacity='0.95' transform='translate(66 9) rotate(-6 8.399999999999999 8.399999999999999) scale(0.7)'/%3E%3Ccircle cx='98' cy='18' r='8' fill='%23ffd6ec' fill-opacity='0.09' stroke='%23ffd6ec' stroke-opacity='0.75' stroke-width='1.6'/%3E%3Cpath d='M93.6 17.2a4.8 4.8 0 0 1 4.0 -4.0' fill='none' stroke='%23fff' stroke-opacity='0.75' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M12 1c.8 6.2 4.8 10.2 11 11-6.2.8-10.2 4.8-11 11-.8-6.2-4.8-10.2-11-11 6.2-.8 10.2-4.8 11-11z' fill='%23fff' fill-opacity='0.95' transform='translate(108 2) scale(0.35)'/%3E%3Ccircle cx='88' cy='8' r='4' fill='%23ffd6ec' fill-opacity='0.08399999999999999' stroke='%23ffd6ec' stroke-opacity='0.7' stroke-width='1.6'/%3E%3Cpath d='M85.8 7.6a2.4 2.4 0 0 1 2.0 -2.0' fill='none' stroke='%23fff' stroke-opacity='0.7' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") left center / contain no-repeat;
pointer-events: none;
animation: poBob 5s ease-in-out infinite;
}
[data-component="InputArea"] textarea,
[data-component="InputArea"] input {
font-family: var(--po-font) !important;
font-size: calc(1em * var(--po-chat-font-scale));
color: var(--po-font-color) !important;
caret-color: var(--po-accent) !important;
}
[data-component="InputArea"] textarea::placeholder {
color: var(--po-font-color-dim) !important;
opacity: 1;
}
[data-component="InputArea"] [class*="_inputWrapper_"] {
border-radius: 20px !important;
border: 1.5px solid color-mix(in srgb, var(--po-accent) 30%, transparent) !important;
background: hsla(300, 55%, 10%, 0.42) !important;
}
[data-component="InputArea"] [class*="_actionBtn_"],
[data-component="InputArea"] [class*="_attachBtn_"] {
border-radius: 999px !important;
color: var(--po-accent-soft);
}
[data-component="InputArea"] [class*="_actionBtn_"]:hover,
[data-component="InputArea"] [class*="_attachBtn_"]:hover,
[data-component="InputArea"] [class*="_actionBtnHasSelection_"],
[data-component="InputArea"] [aria-pressed="true"] {
background: var(--po-tab-active) !important;
color: var(--po-font-color);
}
/* send button: glowing bubblegum orb that beats like a heart */
[data-component="InputArea"] [class*="_sendBtn_"] {
border: 0 !important;
border-radius: 50% !important;
color: #fff !important;
background: radial-gradient(circle at 32% 28%, #ffc2e2 0%, var(--po-accent) 48%, #d6498f 100%) !important;
box-shadow: 0 0 0 3px rgba(255, 179, 220, 0.28), 0 6px 20px rgba(255, 105, 180, 0.5) !important;
animation: poBeat 2.6s ease-in-out infinite;
}
[data-component="InputArea"] [class*="_sendBtn_"]:hover:not(:disabled) {
background: radial-gradient(circle at 32% 28%, #ffd6ec 0%, var(--po-accent-hot) 52%, #c2468a 100%) !important;
transform: scale(1.1);
}
/* ─────────────────────────────────────────────────────────
BUTTONS, TOGGLES, TOASTS, LANDING
───────────────────────────────────────────────────────── */
[data-variant="primary"] {
background: linear-gradient(135deg, var(--po-accent-soft), var(--po-accent) 55%, #d6498f) !important;
color: #3a0f33 !important;
border: 0 !important;
border-radius: 999px !important;
font-weight: 700 !important;
box-shadow: 0 4px 16px rgba(255, 105, 180, 0.35);
}
[data-variant="primary"]:hover {
filter: brightness(1.08);
transform: translateY(-1px);
}
[data-state="checked"] {
background-color: var(--po-accent) !important;
}
[data-sonner-toast] {
font-family: var(--po-font) !important;
background: var(--po-modal) !important;
color: var(--po-font-color) !important;
border: 1.5px solid var(--po-glass-border) !important;
border-radius: 20px !important;
box-shadow: 0 10px 34px rgba(20, 4, 30, 0.5), 0 0 24px rgba(255, 105, 180, 0.2) !important;
}
[data-reasoning-toggle="true"] {
border-radius: 999px;
color: var(--po-lilac);
}
[data-component="LandingPageChats"] {
--lcs-glass-bg: var(--po-glass);
--lcs-glass-bg-hover: var(--po-glass-hover);
--lcs-glass-border: var(--po-glass-border);
--lcs-glass-border-hover: var(--po-glass-border-hover);
font-family: var(--po-font) !important;
}
[data-component="LandingPageChats"] [class*="_card_"] {
border-radius: var(--po-radius);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
[data-component="LandingPageChats"] [class*="_card_"]:hover {
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(255, 105, 180, 0.24);
}
/* ─────────────────────────────────────────────────────────
HOME PAGE: JELLYFISH TANK CARDS (cuter edition)
Every chat card on the home page is a little deep-sea window:
surface light rays, heart & baby-jelly bubbles drifting up, a glowing
jellyfish-bell portrait that floats and squishes, a heart-ribbon bow,
a frilly skirt with heart-tipped tentacles, and a row of pink waves.
Hover = happy jelly (everything wiggles faster, the bow pops).
The host's 3:4 card footprint is kept (its list virtualizer estimates
row height from that exact ratio) and the whole card stays the one
clickable button - everything added here is decoration.
───────────────────────────────────────────────────────── */
[data-component="LandingPageChats"] {
--pj-ink: var(--po-font-color);
--pj-muted: var(--po-font-color-soft);
--pj-glow: var(--po-accent); /* jelly + card glow colour */
--pj-label: var(--po-lilac); /* tiny "swimming with" label */
--pj-float-speed: 6s; /* jellyfish bob/squish speed */
--pj-sway-speed: 5s; /* tentacle sway speed */
--pj-rise-speed: 16s; /* hearts + baby jellies drifting up */
--pj-rise-opacity: 0.85; /* 0 hides the rising hearts / baby jellies */
}
[data-component="LandingPageChats"] [class*="_cardTilt_"] {
min-width: 0 !important;
}
/* a card that is being hovered = a happy jelly */
[data-component="LandingPageChats"] [class*="_card_"]:not([class*="_cardContent_"]):hover {
--pj-float-speed: 2.4s;
--pj-sway-speed: 1.7s;
--pj-rise-speed: 8s;
}
/* ── The tank ── */
[data-component="LandingPageChats"] [class*="_card_"]:not([class*="_cardContent_"]) {
position: relative !important;
isolation: isolate !important;
overflow: hidden !important;
border: 2px solid color-mix(in srgb, var(--pj-glow) 42%, transparent) !important;
border-radius: calc(var(--po-radius) + 6px) !important;
background:
/* pink wave row along the bottom */
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 14' preserveAspectRatio='none'%3E%3Cpath d='M0 7 Q7.5 0 15 7 T30 7 T45 7 T60 7 V14 H0 Z' fill='%23ff7eb9' fill-opacity='.2'/%3E%3Cpath d='M0 10 Q7.5 4 15 10 T30 10 T45 10 T60 10 V14 H0 Z' fill='%23ffb3dc' fill-opacity='.16'/%3E%3C/svg%3E") left bottom / 64px 15px repeat-x,
/* little bubbles */
radial-gradient(circle at 14% 74%, transparent 0 2.5px, rgba(255, 214, 236, 0.55) 3px 4px, transparent 4.6px),
radial-gradient(circle at 86% 62%, transparent 0 4px, rgba(255, 214, 236, 0.45) 4.5px 5.5px, transparent 6.2px),
radial-gradient(circle at 78% 90%, transparent 0 2px, rgba(255, 214, 236, 0.5) 2.5px 3.5px, transparent 4px),
radial-gradient(circle at 10% 38%, transparent 0 1.8px, rgba(255, 214, 236, 0.4) 2.2px 3px, transparent 3.5px),
radial-gradient(circle at 92% 24%, transparent 0 2.2px, rgba(255, 214, 236, 0.4) 2.6px 3.4px, transparent 4px),
/* sunlight from the surface */
radial-gradient(ellipse 80% 38% at 50% -6%, color-mix(in srgb, var(--po-aqua) 30%, transparent), transparent 70%),
/* a blush of bubblegum glow behind the jelly */
radial-gradient(ellipse 70% 34% at 50% 34%, color-mix(in srgb, var(--pj-glow) 22%, transparent), transparent 74%),
/* the water */
linear-gradient(180deg,
color-mix(in srgb, var(--po-sea-top) 86%, var(--po-aqua)) 0%,
var(--po-sea-mid) 52%,
var(--po-sea-deep) 100%) !important;
box-shadow:
inset 0 1px 0 rgba(255, 220, 240, 0.2),
inset 0 0 26px color-mix(in srgb, var(--pj-glow) 14%, transparent),
0 8px 22px rgba(20, 4, 30, 0.38),
0 0 20px var(--po-card-glow) !important;
}
[data-component="LandingPageChats"] [class*="_card_"]:not([class*="_cardContent_"]):hover {
border-color: color-mix(in srgb, var(--pj-glow) 78%, transparent) !important;
box-shadow:
inset 0 1px 0 rgba(255, 220, 240, 0.26),
inset 0 0 34px color-mix(in srgb, var(--pj-glow) 24%, transparent),
0 12px 30px rgba(20, 4, 30, 0.42),
0 0 32px color-mix(in srgb, var(--pj-glow) 50%, transparent) !important;
}
/* sunbeams slanting down through the water + a tiny heart in each top corner */
[data-component="LandingPageChats"] [class*="_card_"]:not([class*="_cardContent_"])::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21C5 15 2 11.5 2 8c0-3 2.2-5 4.8-5 2.2 0 4.1 1.2 5.2 3.200C13.1 4.2 15 3 17.2 3 19.8 3 22 5 22 8c0 3.5-3 7-10 13z' fill='%23ffb3dc' fill-opacity='.75'/%3E%3C/svg%3E") 10px 9px / 11px 11px no-repeat,
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21C5 15 2 11.5 2 8c0-3 2.2-5 4.8-5 2.2 0 4.1 1.2 5.2 3.200C13.1 4.2 15 3 17.2 3 19.8 3 22 5 22 8c0 3.5-3 7-10 13z' fill='none' stroke='%23c9a7ff' stroke-opacity='.85' stroke-width='2.4'/%3E%3C/svg%3E") calc(100% - 10px) 9px / 11px 11px no-repeat,
repeating-linear-gradient(104deg, transparent 0 16px, rgba(255, 255, 255, 0.045) 16px 28px);
-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 12%, rgba(0,0,0,.9) 22%, transparent 62%);
mask-image: linear-gradient(180deg, #000 0%, #000 12%, rgba(0,0,0,.9) 22%, transparent 62%);
pointer-events: none;
}
/* frilly skirt + swaying tentacles with a little heart on every tip.
It bobs together with the bell (translate) and sways on its own (skew). */
[data-component="LandingPageChats"] [class*="_card_"]:not([class*="_cardContent_"])::after {
content: "";
position: absolute;
top: 48.5%;
left: 15%;
z-index: 2;
width: 70%;
height: 16%;
transform-origin: 50% 0;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 43' preserveAspectRatio='none'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M36 8 C30 13 42 17 36 22 S30 28 36 31' stroke='%23ffb3dc' stroke-opacity='.93' stroke-width='3.4'/%3E%3Cpath d='M56 8 C62 13 50 17 56 22 S62 28 56 31' stroke='%23ff7eb9' stroke-opacity='.93' stroke-width='3.0'/%3E%3Cpath d='M70 8 C65 13 75 17 70 22 S65 28 70 31' stroke='%23c9a7ff' stroke-opacity='.93' stroke-width='3.6'/%3E%3Cpath d='M84 8 C78 13 90 17 84 22 S78 28 84 31' stroke='%23ff7eb9' stroke-opacity='.93' stroke-width='3.0'/%3E%3Cpath d='M104 8 C110 13 98 17 104 22 S110 28 104 31' stroke='%23ffb3dc' stroke-opacity='.93' stroke-width='3.4'/%3E%3C/g%3E%3Cpath fill='%23ff9ccb' transform='translate(30 28.5) scale(.5)' d='M12 21C5 15 2 11.5 2 8c0-3 2.2-5 4.8-5 2.2 0 4.1 1.2 5.2 3.2C13.1 4.2 15 3 17.2 3 19.8 3 22 5 22 8c0 3.5-3 7-10 13z'/%3E%3Cpath fill='%23ff9ccb' transform='translate(50 28.5) scale(.5)' d='M12 21C5 15 2 11.5 2 8c0-3 2.2-5 4.8-5 2.2 0 4.1 1.2 5.2 3.2C13.1 4.2 15 3 17.2 3 19.8 3 22 5 22 8c0 3.5-3 7-10 13z'/%3E%3Cpath fill='%23c9a7ff' transform='translate(64 28.5) scale(.5)' d='M12 21C5 15 2 11.5 2 8c0-3 2.2-5 4.8-5 2.2 0 4.1 1.2 5.2 3.2C13.1 4.2 15 3 17.2 3 19.8 3 22 5 22 8c0 3.5-3 7-10 13z'/%3E%3Cpath fill='%23ff9ccb' transform='translate(78 28.5) scale(.5)' d='M12 21C5 15 2 11.5 2 8c0-3 2.2-5 4.8-5 2.2 0 4.1 1.2 5.2 3.2C13.1 4.2 15 3 17.2 3 19.8 3 22 5 22 8c0 3.5-3 7-10 13z'/%3E%3Cpath fill='%23ff9ccb' transform='translate(98 28.5) scale(.5)' d='M12 21C5 15 2 11.5 2 8c0-3 2.2-5 4.8-5 2.2 0 4.1 1.2 5.2 3.2C13.1 4.2 15 3 17.2 3 19.8 3 22 5 22 8c0 3.5-3 7-10 13z'/%3E%3Cpath d='M20 2 L120 2 L120 7 A6.25 6.25 0 0 1 107.5 7 A6.25 6.25 0 0 1 95 7 A6.25 6.25 0 0 1 82.5 7 A6.25 6.25 0 0 1 70 7 A6.25 6.25 0 0 1 57.5 7 A6.25 6.25 0 0 1 45 7 A6.25 6.25 0 0 1 32.5 7 A6.25 6.25 0 0 1 20 7 Z' fill='%23ffb3dc' fill-opacity='.92' stroke='%23ff7eb9' stroke-width='1.4' stroke-linejoin='round'/%3E%3Ccircle cx='26.25' cy='7.2' r='1' fill='%23fff' fill-opacity='.8'/%3E%3Ccircle cx='38.75' cy='7.2' r='1' fill='%23fff' fill-opacity='.8'/%3E%3Ccircle cx='51.25' cy='7.2' r='1' fill='%23fff' fill-opacity='.8'/%3E%3Ccircle cx='63.75' cy='7.2' r='1' fill='%23fff' fill-opacity='.8'/%3E%3Ccircle cx='76.25' cy='7.2' r='1' fill='%23fff' fill-opacity='.8'/%3E%3Ccircle cx='88.75' cy='7.2' r='1' fill='%23fff' fill-opacity='.8'/%3E%3Ccircle cx='101.25' cy='7.2' r='1' fill='%23fff' fill-opacity='.8'/%3E%3Ccircle cx='113.75' cy='7.2' r='1' fill='%23fff' fill-opacity='.8'/%3E%3C/svg%3E") center top / 100% 100% no-repeat;
-webkit-mask-image: linear-gradient(180deg, #000 82%, transparent 100%);
mask-image: linear-gradient(180deg, #000 82%, transparent 100%);
filter: drop-shadow(0 0 5px rgba(255, 126, 185, 0.5));
pointer-events: none;
animation:
poJellySway var(--pj-sway-speed) ease-in-out infinite alternate,
poJellyBob var(--pj-float-speed) ease-in-out infinite;
}
/* ── The whole-card button keeps the host's 3:4 footprint ── */
[data-component="LandingPageChats"] [class*="_cardBtn_"] {
position: relative !important;
display: block !important;
width: 100% !important;
aspect-ratio: 3 / 4 !important;
padding: 0 !important;
color: var(--pj-ink) !important;
background: transparent !important;
}
/* hearts, bubbles and baby jellyfish drifting up the tank (behind the bell) */
[data-component="LandingPageChats"] [class*="_cardBtn_"]::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
opacity: var(--pj-rise-opacity);
background-image:
/* pink heart */
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 170'%3E%3Cpath transform='translate(0 140) scale(.58)' d='M12 21C5 15 2 11.5 2 8c0-3 2.2-5 4.8-5 2.2 0 4.1 1.2 5.2 3.200C13.1 4.2 15 3 17.2 3 19.8 3 22 5 22 8c0 3.5-3 7-10 13z' fill='%23ff9ccb'/%3E%3C/svg%3E"),
/* lilac heart */
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 230'%3E%3Cpath transform='translate(0 120) scale(.46)' d='M12 21C5 15 2 11.5 2 8c0-3 2.2-5 4.8-5 2.2 0 4.1 1.2 5.2 3.200C13.1 4.2 15 3 17.2 3 19.8 3 22 5 22 8c0 3.5-3 7-10 13z' fill='%23c9a7ff'/%3E%3C/svg%3E"),
/* baby jellyfish (pink) */
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 130'%3E%3Cpath d='M3 60 C3 48 17 48 17 60 Z' fill='%23ffb3dc'/%3E%3Cg fill='none' stroke='%23ff9ccb' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M6 61 C4 65 8 67 6 71'/%3E%3Cpath d='M10 61 C8 66 12 68 10 73'/%3E%3Cpath d='M14 61 C12 65 16 67 14 71'/%3E%3C/g%3E%3Ccircle cx='7.5' cy='55' r='1.1' fill='%23fff'/%3E%3C/svg%3E"),
/* bubble */
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 290'%3E%3Ccircle cx='4.5' cy='200' r='3.3' fill='none' stroke='%23ffd6ec' stroke-width='1' stroke-opacity='.9'/%3E%3Ccircle cx='3.3' cy='198.8' r='.8' fill='%23fff' fill-opacity='.9'/%3E%3C/svg%3E"),
/* baby jellyfish (aqua) */
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 210'%3E%3Cpath d='M2 100 C2 90 14 90 14 100 Z' fill='%2386e6ee' fill-opacity='.9'/%3E%3Cg fill='none' stroke='%2386e6ee' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M5 101 C3 104 7 106 5 109'/%3E%3Cpath d='M8 101 C6 105 10 107 8 111'/%3E%3Cpath d='M11 101 C9 104 13 106 11 109'/%3E%3C/g%3E%3C/svg%3E");
background-repeat: repeat-y;
background-size: 14px 170px, 11px 230px, 20px 130px, 9px 290px, 16px 210px;
background-position: 5% 0, 95% 0, 91% 0, 10% 0, 2% 0;
-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 52%, transparent 70%);
mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 52%, transparent 70%);
pointer-events: none;
animation: poHeartsRise var(--pj-rise-speed) linear infinite;
}
/* heart-ribbon bow perched on the bell */
[data-component="LandingPageChats"] [class*="_cardBtn_"]::after {
content: "";
position: absolute;
top: 3.5%;
left: 24%;
z-index: 6;
width: 24%;
aspect-ratio: 40 / 26;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 26'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffd6ec'/%3E%3Cstop offset='1' stop-color='%23ff6fb0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg stroke='%23d04a92' stroke-width='1.3' stroke-linejoin='round' fill='url(%23g)'%3E%3Cpath transform='translate(12 13) rotate(-90) scale(.92) translate(-12 -12)' d='M12 21C5 15 2 11.5 2 8c0-3 2.2-5 4.8-5 2.2 0 4.1 1.2 5.2 3.2C13.1 4.2 15 3 17.2 3 19.8 3 22 5 22 8c0 3.5-3 7-10 13z'/%3E%3Cpath transform='translate(28 13) rotate(90) scale(.92) translate(-12 -12)' d='M12 21C5 15 2 11.5 2 8c0-3 2.2-5 4.8-5 2.2 0 4.1 1.2 5.2 3.2C13.1 4.2 15 3 17.2 3 19.8 3 22 5 22 8c0 3.5-3 7-10 13z'/%3E%3C/g%3E%3Ccircle cx='20' cy='13' r='3.6' fill='%23ff8fc7' stroke='%23d04a92' stroke-width='1.3'/%3E%3Ccircle cx='18.8' cy='11.8' r='1.1' fill='%23fff' fill-opacity='.9'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
filter: drop-shadow(0 2px 4px rgba(20, 4, 30, 0.4));
transform: rotate(-16deg);
transition: scale 0.3s cubic-bezier(0.34, 1.8, 0.5, 1);
pointer-events: none;
animation: poJellyBob var(--pj-float-speed) ease-in-out infinite;
}
[data-component="LandingPageChats"] [class*="_card_"]:not([class*="_cardContent_"]):hover [class*="_cardBtn_"]::after {
scale: 1.22;
}
/* ── Jellyfish bell: the portrait ── */
[data-component="LandingPageChats"] [class*="_cardImage_"] {
position: absolute !important;
top: 7% !important;
left: 16% !important;
z-index: 3 !important;
width: 68% !important;
height: auto !important;
aspect-ratio: 1 / 0.84 !important;
border: 3px solid color-mix(in srgb, #ffd6ec 85%, transparent) !important;
border-radius: 50% 50% 38% 38% / 64% 64% 36% 36% !important;
background: var(--po-sea-deep) !important;
box-shadow:
0 0 0 5px color-mix(in srgb, var(--pj-glow) 22%, transparent),
0 0 0 9px color-mix(in srgb, var(--pj-glow) 9%, transparent),
0 0 28px color-mix(in srgb, var(--pj-glow) 60%, transparent),
0 10px 22px rgba(20, 4, 30, 0.4) !important;
overflow: hidden !important;
isolation: isolate !important;
animation: poJellyFloat var(--pj-float-speed) ease-in-out infinite;
}
[data-component="LandingPageChats"] [class*="_cardImage_"] :is(img, picture img) {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
filter: saturate(1.08) brightness(1.03) !important;
}
[data-component="LandingPageChats"] [class*="_cardImageOverlay_"] {
display: none !important;
}
/* glossy highlight + translucent rosy tint toward the skirt of the bell */
[data-component="LandingPageChats"] [class*="_cardImage_"]::before {
content: "";
position: absolute;
inset: 0;
z-index: 4;
border-radius: inherit;
background:
radial-gradient(ellipse 36% 20% at 30% 15%, rgba(255, 255, 255, 0.6), transparent 72%),
radial-gradient(circle at 74% 20%, rgba(255, 255, 255, 0.5) 0 2.500px, transparent 3.500px),
linear-gradient(180deg,
rgba(255, 255, 255, 0.14),
transparent 30%,
transparent 58%,
color-mix(in srgb, var(--pj-glow) 46%, transparent) 100%);
pointer-events: none;
}
/* soft inner glow, like light passing through jelly */
[data-component="LandingPageChats"] [class*="_cardImage_"]::after {
content: "";
position: absolute;
inset: 0;
z-index: 5;
border-radius: inherit;
box-shadow: inset 0 0 24px rgba(255, 214, 236, 0.42);
pointer-events: none;
}
/* ── Name + meta ── */
[data-component="LandingPageChats"] [class*="_cardContent_"] {
position: absolute !important;
top: auto !important;
right: 9px !important;
bottom: 9px !important;
left: 9px !important;
z-index: 4 !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
gap: 2px !important;
height: 32% !important;
padding: 4px 4px 0 !important;
border: 0 !important;
color: var(--pj-ink) !important;
background: transparent !important;
}
[data-component="LandingPageChats"] [class*="_cardName_"] {
position: relative !important;
display: block !important;
min-width: 0 !important;
margin: 0 !important;
color: var(--pj-ink) !important;
font: 700 13px/1.2 var(--po-font) !important;
letter-spacing: 0.01em !important;
text-align: center !important;
text-shadow: var(--po-text-glow);
}
[data-component="LandingPageChats"] [class*="_cardName_"] svg {
position: absolute !important;
top: 0 !important;
right: 0 !important;
width: 9px !important;
height: 9px !important;
color: var(--po-accent-soft) !important;
}
[data-component="LandingPageChats"] [class*="_cardName_"]::before {
content: "\2661 swimming with \2661";
display: block;
margin-bottom: 2px;
color: var(--pj-label);
font: 600 8px/1 var(--po-font);
letter-spacing: 0.1em;
text-shadow: none;
opacity: 0.95;
}
[data-component="LandingPageChats"] [class*="_cardName_"] span {
display: block !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
[data-component="LandingPageChats"] [class*="_cardMeta_"] {
display: flex !important;
flex-wrap: wrap !important;
align-content: center !important;
align-items: center !important;
justify-content: center !important;
gap: 1px 6px !important;
min-height: 29px !important;
padding: 3px 10px !important;
border: 1.5px solid color-mix(in srgb, var(--pj-glow) 44%, transparent) !important;
border-radius: 999px !important;
color: var(--pj-muted) !important;
background: linear-gradient(180deg,
color-mix(in srgb, var(--pj-glow) 14%, var(--po-sea-deep)),
color-mix(in srgb, var(--po-sea-deep) 70%, transparent)) !important;
box-shadow: inset 0 0 10px color-mix(in srgb, var(--pj-glow) 16%, transparent) !important;
}
[data-component="LandingPageChats"] [class*="_cardMeta_"]::before {
content: "last splash \2661";
flex-basis: 100%;
color: var(--po-accent-soft);
font: 600 7px/1 var(--po-font);
letter-spacing: 0.08em;
text-align: center;
opacity: 0.9;
}
[data-component="LandingPageChats"] [class*="_cardMeta_"] :is([class*="_cardTime_"], [class*="_chatCountBadge_"], [class*="_groupBadge_"]) {
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
color: var(--pj-muted) !important;
background: transparent !important;
font: 600 8px/1.1 var(--po-font) !important;
letter-spacing: 0.04em !important;
}
/* a little trail of bubbles and hearts along the bottom - the hearts beat */
[data-component="LandingPageChats"] [class*="_cardContent_"]::after {
content: "\00B0 o \2661 o \00B0";
display: block;
height: 11px;
color: var(--po-accent-soft);
font: 10px/11px var(--po-font);
letter-spacing: 0.12em;
text-align: center;
white-space: nowrap;
opacity: 0.7;
pointer-events: none;
animation: poHeartBeat 2.4s ease-in-out infinite;
}
/* ── Motion ── */
@keyframes poJellyFloat {
0%, 100% { translate: 0 0; scale: 1 1; }
50% { translate: 0 -5px; scale: 1.03 0.965; }
}
@keyframes poJellyBob {
0%, 100% { translate: 0 0; }
50% { translate: 0 -5px; }
}
@keyframes poJellySway {
0% { transform: skewX(-5deg); }
100% { transform: skewX(5deg); }
}
/* every layer is a tile as tall as its distance, so the loop is seamless */
@keyframes poHeartsRise {
from { background-position: 5% 0, 95% 0, 91% 0, 10% 0, 2% 0; }
to { background-position: 5% -170px, 95% -230px, 91% -130px, 10% -290px, 2% -210px; }
}
@keyframes poHeartBeat {
0%, 100% { transform: scale(1); }
45% { transform: scale(1.1); }
60% { transform: scale(0.98); }
}
@media (prefers-reduced-motion: reduce) {
[data-component="LandingPageChats"] [class*="_card_"]:not([class*="_cardContent_"])::after,
[data-component="LandingPageChats"] [class*="_cardBtn_"]::before,
[data-component="LandingPageChats"] [class*="_cardBtn_"]::after,
[data-component="LandingPageChats"] [class*="_cardContent_"]::after,
[data-component="LandingPageChats"] [class*="_cardImage_"] {
animation: none;
}
}
@media (max-width: 600px) {
[data-component="LandingPageChats"] [class*="_cardImage_"] {
top: 5% !important;
left: 19% !important;
width: 62% !important;
border-width: 2px !important;
}
[data-component="LandingPageChats"] [class*="_cardBtn_"]::after {
top: 1.5%;
left: 25%;
width: 26%;
}
[data-component="LandingPageChats"] [class*="_card_"]:not([class*="_cardContent_"])::after {
top: 43.5%;
height: 16%;
}
[data-component="LandingPageChats"] [class*="_cardContent_"] {
right: 5px !important;
bottom: 5px !important;
left: 5px !important;
height: 40% !important;
padding: 3px 3px 0 !important;
}
[data-component="LandingPageChats"] [class*="_cardName_"] {
font-size: 10px !important;
}
[data-component="LandingPageChats"] [class*="_cardMeta_"] {
min-height: 23px !important;
padding: 2px 7px !important;
}
[data-component="LandingPageChats"] [class*="_cardContent_"]::after {
height: 9px;
font-size: 8px;
line-height: 9px;
}
}
[data-component="DesktopPwaTitlebar"] {
background: linear-gradient(90deg, hsla(318, 58%, 22%, 0.92), hsla(290, 52%, 16%, 0.92)) !important;
color: var(--po-font-color) !important;
}
/* ─────────────────────────────────────────────────────────
SCROLLBAR & TEXT SELECTION
───────────────────────────────────────────────────────── */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: var(--po-scrollbar);
border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--po-scrollbar-hover);
}
::selection {
background: var(--po-selection) !important;
color: inherit !important;
}
/* ─────────────────────────────────────────────────────────
OPTIONAL PERSONAL TWEAKS
Place custom CSS below
───────────────────────────────────────────────────────── */
/* ═══════════ UI SIZE — matched to Pinned Butterflies ═══════════
Measured off Pinned Butterflies (1166×924 window):
portrait frame 270×370 · text panel ≈620 wide · input + top bar ≈830 wide · whole message row ≈930 wide.
Everything sits centred in the chat area. The portrait scales gently with window height (40vh → 370px at 924px tall).
To resize, change these five numbers — nothing else needs touching. */
:root {
--ui-portrait-h: clamp(300px, 40vh, 430px);
--ui-portrait-w: calc(var(--ui-portrait-h) * 0.73);
--ui-msg-w: 930px; /* portrait + text panel */
--ui-bar-w: 830px; /* top bar + input bar */
--ui-rail-gap: 16px; /* space between portrait and text panel */
}
/* message rows: centred column instead of edge-to-edge */
html body [data-component="MinimalMessage"][data-component="MinimalMessage"][data-component="MinimalMessage"][data-component="MinimalMessage"] {
max-width: min(var(--ui-msg-w), 100%) !important;
margin-left: auto !important;
margin-right: auto !important;
}
@media (min-width: 721px) {
html body [data-component="MinimalMessage"][data-component="MinimalMessage"][data-component="MinimalMessage"][data-component="MinimalMessage"] {
--me-rail-gap: var(--ui-rail-gap);
}
}
/* top bar: same strip width as the input bar, floating like the Butterflies bar */
html body [data-chatroom-region="header"][data-chatroom-region="header"] {
box-sizing: border-box !important;
position: relative;
left: 0; right: 0;
width: min(var(--ui-bar-w), calc(100% - 24px)) !important;
margin: 12px auto 0 !important;
}
html body [class*="_chatToolbar_"][class*="_chatToolbar_"],
html body [data-spindle-mount="chat_top_dock"][data-spindle-mount="chat_top_dock"] {
width: min(var(--ui-bar-w), 100%) !important;
align-self: center !important;
box-sizing: border-box !important;
}
/* input bar (the toolbar icons + text box live inside it) */
html body [data-component="InputArea"][data-component="InputArea"] {
box-sizing: border-box !important;
left: 0 !important; right: 0 !important;
margin-left: auto !important; margin-right: auto !important;
width: min(var(--ui-bar-w), calc(100% - 24px)) !important;
max-width: 100% !important;
}
html body [data-chatroom-region="header"][data-chatroom-region="header"] {
border: 1.5px solid var(--po-glass-border) !important;
border-radius: var(--po-radius) !important;
}
/* bubble-style chat (if you switch the message style) uses the same centred column */
html body [data-component="BubbleMessage"][data-component="BubbleMessage"] {
box-sizing: border-box !important;
width: min(var(--ui-msg-w), 100%) !important;
min-width: 0 !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* ═══════════════════════════════════════════════════════════
PINK JELLYFISH — BUBBLEMESSAGE CSS (by Heart Goldie)
Component-scoped message styling: rose-glass bubbles with a heart
and sparkle perched on the corner.
Colours, fonts and glow are controlled in the Global CSS
(--po-font-color, --po-name-color, --po-card ...).
═══════════════════════════════════════════════════════════ */
/* ─────────────────────────────────────────────────────────
BUBBLE ROOT
───────────────────────────────────────────────────────── */
[data-component="BubbleMessage"] {
position: relative;
font-family: var(--po-font) !important;
color: var(--po-font-color);
}
/* ─────────────────────────────────────────────────────────
MESSAGE TEXT
───────────────────────────────────────────────────────── */
[data-component="BubbleMessage"] [class*="_content_"],
[data-component="BubbleMessage"] [class*="_text_"],
[data-component="BubbleMessage"] [class*="_markdown_"] {
font-family: var(--po-font) !important;
font-size: calc(1em * var(--po-chat-font-scale));
color: var(--po-message-color);
text-shadow: var(--po-text-glow);
line-height: 1.7;
}
[data-component="BubbleMessage"] em,
[data-component="BubbleMessage"] i:not([class]) {
color: var(--po-action-color);
}
[data-component="BubbleMessage"] strong,
[data-component="BubbleMessage"] b {
color: var(--po-bold-color);
}
[data-component="BubbleMessage"] h1,
[data-component="BubbleMessage"] h2,
[data-component="BubbleMessage"] h3,
[data-component="BubbleMessage"] h4 {
color: var(--po-heading-color);
}
/* ─────────────────────────────────────────────────────────
SPEAKER / NAME
───────────────────────────────────────────────────────── */
[data-component="BubbleMessage"] [class*="_name_"] {
font-family: var(--po-font) !important;
font-weight: 700 !important;
letter-spacing: 0.01em;
color: var(--po-name-color) !important;
}
/* ─────────────────────────────────────────────────────────
METADATA / COUNTERS / TOKENS
───────────────────────────────────────────────────────── */
[data-component="BubbleMessage"] [class*="_metaPill_"],
[data-component="BubbleMessage"] [class*="_metaSegment_"],
[data-component="BubbleMessage"] [class*="_meta_"],
[data-component="BubbleMessage"] [class*="_counter_"],
[data-component="BubbleMessage"] [class*="_token_"] {
font-family: var(--po-font-mono) !important;
font-size: calc(1em * var(--po-meta-font-scale));
color: var(--po-font-color-soft);
opacity: 0.8;
}
/* ─────────────────────────────────────────────────────────
BUBBLE CARD
Rose glass, pink edge glow, heart + sparkle on the corner.
───────────────────────────────────────────────────────── */
[data-component="BubbleMessage"] [class*="_card_"] {
position: relative;
background: var(--po-card) !important;
border: 1.5px solid var(--po-card-border) !important;
border-radius: var(--po-radius) !important;
box-shadow:
inset 0 1px 0 rgba(255, 220, 240, 0.14),
0 6px 22px rgba(20, 4, 30, 0.32),
0 0 26px var(--po-card-glow);
backdrop-filter: blur(var(--po-blur));
-webkit-backdrop-filter: blur(var(--po-blur));
}
[data-component="BubbleMessage"][class*="_user_"] [class*="_card_"],
[data-component="BubbleMessage"] [class*="_user_"] [class*="_card_"] {
background: var(--po-card-user) !important;
}
[data-component="BubbleMessage"] [class*="_card_"]::after {
content: "";
position: absolute;
top: -26px;
right: 18px;
width: 64px;
height: 30px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='30' viewBox='0 0 64 30'%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.4C.9 8.2 3 4.5 6.4 4.5c2.2 0 3.7 1.2 5.6 3.3 1.9-2.1 3.4-3.3 5.6-3.3 3.4 0 5.5 3.7 4 7.1C19.5 16.4 12 21 12 21z' fill='%23ff7eb9' fill-opacity='0.95' transform='translate(34 3) rotate(10 11.399999999999999 11.399999999999999) scale(0.95)'/%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.4C.9 8.2 3 4.5 6.4 4.5c2.2 0 3.7 1.2 5.6 3.3 1.9-2.1 3.4-3.3 5.6-3.3 3.4 0 5.5 3.7 4 7.1C19.5 16.4 12 21 12 21z' fill='%23ffc2e2' fill-opacity='0.9' transform='translate(12 12) rotate(-12 6.6000000000000005 6.6000000000000005) scale(0.55)'/%3E%3Cpath d='M12 1c.8 6.2 4.8 10.2 11 11-6.2.8-10.2 4.8-11 11-.8-6.2-4.8-10.2-11-11 6.2-.8 10.2-4.8 11-11z' fill='%23fff' fill-opacity='0.95' transform='translate(54 2) scale(0.38)'/%3E%3C/svg%3E") center / contain no-repeat;
pointer-events: none;
animation: poBob 4.5s ease-in-out infinite;
}
/* ─────────────────────────────────────────────────────────
QUOTED TEXT
───────────────────────────────────────────────────────── */
[data-component="BubbleMessage"] blockquote {
position: relative;
margin-left: 0;
padding: 10px 14px 10px 40px;
border: 0;
border-radius: 16px;
background: var(--po-quote-bg);
box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--po-accent) 30%, transparent);
}
[data-component="BubbleMessage"] blockquote::before {
content: "";
position: absolute;
left: 11px;
top: 12px;
width: 20px;
height: 20px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.4C.9 8.2 3 4.5 6.4 4.5c2.2 0 3.7 1.2 5.6 3.3 1.9-2.1 3.4-3.3 5.6-3.3 3.4 0 5.5 3.7 4 7.1C19.5 16.4 12 21 12 21z' fill='%23ff7eb9' fill-opacity='0.9' transform='translate(1 1) rotate(-8 12 12) scale(1)'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* ─────────────────────────────────────────────────────────
LISTS & DIVIDERS
───────────────────────────────────────────────────────── */
[data-component="BubbleMessage"] ul > li::marker {
content: "♥ ";
color: var(--po-accent);
font-size: 0.85em;
}
[data-component="BubbleMessage"] ol > li::marker {
color: var(--po-accent);
font-weight: 700;
}
[data-component="BubbleMessage"] hr {
border: 0;
height: 16px;
margin: 1.1em 0;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='16' viewBox='0 0 44 16'%3E%3Cpath d='M0 8H12M32 8H44' stroke='%23ff9ccb' stroke-opacity='.55' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.4C.9 8.2 3 4.5 6.4 4.5c2.2 0 3.7 1.2 5.6 3.3 1.9-2.1 3.4-3.3 5.6-3.3 3.4 0 5.5 3.7 4 7.1C19.5 16.4 12 21 12 21z' fill='%23ff7eb9' fill-opacity='1' transform='translate(16 2) rotate(0 6.0 6.0) scale(0.5)'/%3E%3C/svg%3E") center / auto 16px repeat-x;
}
/* ─────────────────────────────────────────────────────────
INLINE + BLOCK CODE
───────────────────────────────────────────────────────── */
[data-component="BubbleMessage"] code:not(pre code) {
font-family: var(--po-font-mono) !important;
background: var(--po-code-bg);
border: 1px solid color-mix(in srgb, var(--po-accent) 28%, transparent);
border-radius: 0.5em;
padding: 0.08em 0.4em;
color: var(--po-accent-soft);
}
[data-component="BubbleMessage"] pre,
[data-component="BubbleMessage"] pre code {
font-family: var(--po-font-mono) !important;
}
[data-component="BubbleMessage"] pre {
background: var(--po-code-bg) !important;
border: 1.5px solid color-mix(in srgb, var(--po-accent) 26%, transparent);
border-radius: 16px;
}
/* ─────────────────────────────────────────────────────────
LINKS & IMAGES
───────────────────────────────────────────────────────── */
[data-component="BubbleMessage"] a {
color: var(--po-link-color);
text-decoration-color: color-mix(in srgb, var(--po-link-color) 55%, transparent);
text-underline-offset: 0.18em;
}
[data-component="BubbleMessage"] img {
border-radius: 16px;
border: 2px solid var(--po-card-border);
}
/* ─────────────────────────────────────────────────────────
OPTIONAL PERSONAL TWEAKS
Place custom CSS below
───────────────────────────────────────────────────────── */