A Skype/Messenger-inspired theme for Lumiverse, supports both light theme and dark theme ༄˖°.🍂.ೃ࿔*:・
✦ PAPER SKIES
Gallery
6 images
LIGHT - Landing page LIGHT - Character message LIGHT - Message body DARK - Landing page DARK - Message body DARK - User message
Palette
14 colors · 5 settings
dark
- Primary
#b6a6e5 - Background
#202a40 - Text
#e5e9f7 - Danger
#e6a4bf - Success
#9bcabf - Speech
#e0d2f7 - Thoughts
#b5d5ed
light
- Primary
#b66643 - Background
#f6eee6 - Text
#344b56
Theme controls
- Accent color
- 24° · 52% · 49%
- Preferred mode
- dark
- Corner scale
- 1
- Glass surfaces
- No
- Type scale
- 1
Stylesheets
1 stylesheet
/* ==========================================================================
PAPER SKIES THEME - HOTFIX
========================================================================== */
/* ── 0. Custom Font Registration (Snapshot 3 Assets & Display Title) ── */
@font-face {
font-family: "Outfit";
src: url("assets/outfit-variablefont_wght.ttf") format("truetype"),
url("assets/outfit-variablefont_wght.ttf") format("truetype"),
url("./assets/outfit-variablefont_wght.ttf") format("truetype"),
url("./assets/outfit-variablefont_wght.ttf") format("truetype");
font-weight: 100 900;
font-display: swap;
}
/* ── 1. Root Tokens & Palette (Clear Polarized Glass) ── */
:root,
html[data-theme-mode="dark"],
body {
/* Coastal Rain Foundations */
--lumiverse-bg: #0b1116 !important;
--lumiverse-bg-elevated: rgba(18, 27, 34, 0.42) !important;
--lumiverse-bg-hover: rgba(28, 42, 53, 0.55) !important;
--lumiverse-bg-dark: rgba(7, 12, 16, 0.65) !important;
--lumiverse-bg-darker: rgba(5, 8, 11, 0.75) !important;
--lumiverse-bg-deep: #070d11 !important;
/* Frosted Glass Layers (Lighter & Translucent) */
--lcs-glass-bg: rgba(18, 27, 35, 0.38) !important;
--lcs-glass-bg-hover: rgba(28, 42, 54, 0.52) !important;
--lcs-glass-border: rgba(255, 255, 255, 0.09) !important;
--lcs-glass-border-hover: rgba(168, 218, 220, 0.32) !important;
--lcs-glass-blur: 20px !important;
/* Seafoam Mist & Jade Accents */
--lumiverse-primary: #8ec5be !important;
--lumiverse-primary-hover: #a8dadc !important;
--lumiverse-primary-light: rgba(142, 197, 190, 0.12) !important;
--lumiverse-primary-muted: rgba(142, 197, 190, 0.5) !important;
--lumiverse-primary-text: #bce5e0 !important;
--lumiverse-primary-010: rgba(142, 197, 190, 0.08) !important;
--lumiverse-primary-015: rgba(142, 197, 190, 0.14) !important;
--lumiverse-primary-020: rgba(142, 197, 190, 0.2) !important;
--lumiverse-primary-050: rgba(142, 197, 190, 0.5) !important;
--lumiverse-primary-contrast: #071015 !important;
--lumiverse-primary-deep: rgba(14, 26, 31, 0.9) !important;
/* Translucent Fills (Airy Liquid Glass) */
--lumiverse-fill-subtle: rgba(255, 255, 255, 0.04) !important;
--lumiverse-fill: rgba(255, 255, 255, 0.07) !important;
--lumiverse-fill-hover: rgba(255, 255, 255, 0.12) !important;
--lumiverse-fill-medium: rgba(18, 27, 35, 0.28) !important;
--lumiverse-fill-strong: rgba(18, 27, 35, 0.38) !important;
--lumiverse-card-bg: rgba(18, 27, 35, 0.38) !important;
/* Typography */
--lumiverse-font-family: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
--lumiverse-font-title: "TitleFont", "Outfit", -apple-system, BlinkMacSystemFont, sans-serif !important;
--lumiverse-text: #eaf0f6 !important;
--lumiverse-text-muted: #94a7b8 !important;
--lumiverse-text-dim: #627585 !important;
--lumiverse-text-hint: #485866 !important;
/* Geometry & Shadows */
--lumiverse-radius-sm: 8px !important;
--lumiverse-radius: 14px !important;
--lumiverse-radius-md: 18px !important;
--lumiverse-radius-lg: 24px !important;
--lumiverse-radius-xl: 32px !important;
--lcs-radius: 20px !important;
--lumiverse-border: rgba(255, 255, 255, 0.08) !important;
--lumiverse-border-hover: rgba(142, 197, 190, 0.35) !important;
--lumiverse-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
--lumiverse-shadow-md: 0 12px 40px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
--lumiverse-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
/* Prose Colors */
--lumiverse-prose-dialogue: #d9f3f0 !important;
--lumiverse-prose-italic: #9ec1cf !important;
}
/* ── 2. Ambient Rain Fog Backdrop ── */
body {
background: radial-gradient(circle at 15% 20%, rgba(28, 48, 58, 0.55), transparent 50%),
radial-gradient(circle at 85% 80%, rgba(18, 38, 45, 0.6), transparent 55%),
linear-gradient(180deg, #090e13 0%, #0d151c 100%) !important;
background-attachment: fixed !important;
}
body::after {
content: "";
position: fixed;
inset: 0;
background: radial-gradient(ellipse at 50% 0%, rgba(142, 197, 190, 0.04) 0%, transparent 70%);
pointer-events: none;
z-index: 9999;
}
/* ── 3. Chat Surface & Universal Column Layout ── */
[data-lumiverse-surface="chat-body"] {
background: transparent !important;
}
[data-component="MinimalMessage"],
[data-component="MinimalMessage"][data-part="character"],
[data-component="MinimalMessage"][data-part="user"] {
position: relative !important;
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
width: 100% !important;
max-width: 840px !important;
margin: 36px auto 28px auto !important;
padding: 0 !important;
border: none !important;
background: transparent !important;
box-shadow: none !important;
overflow: visible !important;
isolation: isolate !important;
box-sizing: border-box !important;
}
[data-component="MinimalMessage"] > [class*="_bubble_"] {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
max-width: 100% !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
padding: 0 !important;
margin: 0 !important;
overflow: visible !important;
}
/* ── 4. Floating Header Capsule (Lighter Frosted Glass) ── */
[data-component="MinimalMessage"] [class*="_header_"] {
position: relative !important;
height: 72px !important;
min-height: 72px !important;
width: fit-content !important;
min-width: 320px !important;
max-width: min(520px, 90vw) !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
background: rgba(14, 23, 30, 0.52) !important;
backdrop-filter: blur(24px) !important;
-webkit-backdrop-filter: blur(24px) !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
border-radius: 22px !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
margin-bottom: 34px !important;
overflow: visible !important;
z-index: 2 !important;
transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
[data-component="MinimalMessage"]:hover [class*="_header_"] {
border-color: rgba(142, 197, 190, 0.35) !important;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}
/* Character Header: Anchored Left */
[data-part="character"] [class*="_header_"] {
margin-right: auto !important;
margin-left: 0 !important;
padding-left: 155px !important;
padding-right: 28px !important;
}
/* User Header: Anchored Right */
[data-part="user"] [class*="_header_"] {
margin-left: auto !important;
margin-right: 0 !important;
padding-right: 155px !important;
padding-left: 28px !important;
}
/* ── 5. Dissolving Portrait Banner ── */
[data-component="MinimalMessage"] [class*="_avatar_"] {
position: absolute !important;
top: 0 !important;
height: 72px !important;
width: 155px !important;
min-width: 155px !important;
max-width: 155px !important;
border: none !important;
background: transparent !important;
box-shadow: none !important;
overflow: hidden !important;
pointer-events: none !important;
z-index: 4 !important;
margin: 0 !important;
padding: 0 !important;
}
[data-component="MinimalMessage"] [class*="_avatar_"] > div,
[data-component="MinimalMessage"] [class*="_avatar_"] img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center 25% !important;
border-radius: 0 !important;
display: block !important;
}
/* Character Avatar: Pinned Left */
[data-part="character"] [class*="_avatar_"] {
left: 0 !important;
right: auto !important;
border-radius: 22px 0 0 22px !important;
mask-image: linear-gradient(to right, black 32%, rgba(0, 0, 0, 0.6) 62%, transparent 100%) !important;
-webkit-mask-image: linear-gradient(to right, black 32%, rgba(0, 0, 0, 0.6) 62%, transparent 100%) !important;
}
/* User Avatar: Pinned Right */
[data-part="user"] [class*="_avatar_"] {
right: 0 !important;
left: auto !important;
border-radius: 0 22px 22px 0 !important;
mask-image: linear-gradient(to left, black 32%, rgba(0, 0, 0, 0.6) 62%, transparent 100%) !important;
-webkit-mask-image: linear-gradient(to left, black 32%, rgba(0, 0, 0, 0.6) 62%, transparent 100%) !important;
}
/* ── 6. Character / User Name (Centered & All Caps) ── */
[data-component="MinimalMessage"] [class*="_name_"] {
font-family: var(--lumiverse-font-title, "Outfit", sans-serif) !important;
font-size: 15.5px !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: 0.14em !important;
line-height: 1.2 !important;
margin: 0 !important;
position: relative !important;
z-index: 6 !important;
text-align: center !important;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85) !important;
}
[data-part="character"] [class*="_name_"] {
color: var(--lumiverse-primary-text) !important;
}
[data-part="user"] [class*="_name_"] {
color: #e2f0f7 !important;
}
/* ── 7. Floating Pill Info ── */
[data-component="MinimalMessage"] [class*="_metaPill_"] {
position: absolute !important;
top: calc(100% + 7px) !important;
z-index: 6 !important;
display: inline-flex !important;
align-items: center !important;
gap: 5px !important;
background: rgba(255, 255, 255, 0.07) !important;
border: 1px solid rgba(255, 255, 255, 0.09) !important;
border-radius: 999px !important;
padding: 2px 8px !important;
width: fit-content !important;
font-size: 10px !important;
color: var(--lumiverse-text-muted) !important;
letter-spacing: 0.02em !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
white-space: nowrap !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}
[data-part="character"] [class*="_metaPill_"] {
left: 14px !important;
right: auto !important;
}
[data-part="user"] [class*="_metaPill_"] {
right: 14px !important;
left: auto !important;
}
/* ── 8. Separate Story Body Card (Lighter Polarized Sea Glass) ── */
[data-component="MinimalMessage"] [data-component="MessageContent"] {
position: relative !important;
width: 100% !important;
box-sizing: border-box !important;
padding: 22px 28px !important;
border-radius: 22px !important;
isolation: isolate !important;
z-index: 5 !important;
}
/* Hardware-Accelerated Pseudo-Element: Holds blur steady during token generation */
[data-component="MinimalMessage"] [data-component="MessageContent"]::before {
content: "" !important;
position: absolute !important;
inset: 0 !important;
z-index: -1 !important;
border-radius: 22px !important;
background: rgba(14, 23, 30, 0.38) !important;
backdrop-filter: blur(20px) !important;
-webkit-backdrop-filter: blur(20px) !important;
border: 1px solid var(--lumiverse-border) !important;
box-shadow: var(--lumiverse-shadow) !important;
pointer-events: none !important;
transform: translateZ(0) !important;
backface-visibility: hidden !important;
will-change: transform !important;
transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
}
[data-part="user"] [data-component="MessageContent"]::before {
background: rgba(18, 30, 40, 0.42) !important;
border-color: rgba(142, 197, 190, 0.18) !important;
}
[data-component="MinimalMessage"]:hover [data-component="MessageContent"]::before {
border-color: rgba(255, 255, 255, 0.14) !important;
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4) !important;
}
/* ── 9. Prose Typography & Reading Flow ── */
[data-component="MessageContent"],
[data-component="MessageContent"] p {
font-size: 15px !important;
line-height: 1.74 !important;
color: var(--lumiverse-text) !important;
letter-spacing: 0.01em !important;
}
[data-component="MessageContent"] em,
[class*="_proseItalic_"] {
color: var(--lumiverse-prose-italic) !important;
font-style: italic !important;
}
[data-component="MessageContent"] span[class*="_proseDialogue_"] {
color: var(--lumiverse-prose-dialogue) !important;
font-weight: 500 !important;
}
/* ── 10. Micro Action Dock ── */
[data-component="MinimalMessage"] [class*="_actionsWrap_"] {
position: absolute !important;
top: 114px !important;
display: flex !important;
opacity: 0 !important;
pointer-events: none !important;
transition: opacity 0.18s ease, transform 0.18s ease !important;
z-index: 25 !important;
}
[data-part="character"] [class*="_actionsWrap_"] {
right: 12px !important;
left: auto !important;
transform: translateY(-2px) !important;
}
[data-part="user"] [class*="_actionsWrap_"] {
left: 12px !important;
right: auto !important;
transform: translateY(-2px) !important;
}
[data-component="MinimalMessage"]:hover [class*="_actionsWrap_"],
[data-component="MinimalMessage"] [class*="_actionsWrap_"]:focus-within {
opacity: 1 !important;
pointer-events: auto !important;
transform: translateY(0) !important;
}
[data-component="MinimalMessage"] [class*="_actions_"] {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 2px !important;
background: rgba(10, 17, 23, 0.78) !important;
backdrop-filter: blur(16px) !important;
-webkit-backdrop-filter: blur(16px) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 999px !important;
padding: 2px 6px !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45) !important;
}
[data-component="MinimalMessage"] [class*="_actions_"] button {
width: 22px !important;
height: 22px !important;
border-radius: 50% !important;
border: 1px solid transparent !important;
background: transparent !important;
color: var(--lumiverse-text-muted) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
cursor: pointer !important;
transition: all 0.14s ease !important;
}
[data-component="MinimalMessage"] [class*="_actions_"] button svg {
width: 11px !important;
height: 11px !important;
}
[data-component="MinimalMessage"] [class*="_actions_"] button:hover {
background: rgba(142, 197, 190, 0.22) !important;
border-color: rgba(142, 197, 190, 0.4) !important;
color: var(--lumiverse-primary-text) !important;
transform: scale(1.1) !important;
}
[data-component="MinimalMessage"] [class*="_actions_"] button[title="Delete"]:hover {
background: rgba(239, 68, 68, 0.25) !important;
border-color: rgba(239, 68, 68, 0.45) !important;
color: #ff8b98 !important;
}
/* ── 11. True Transparent HTML Island Container ── */
[data-lumiverse-html-island],
[class*="_htmlIsland_"] {
background: transparent !important;
background-color: transparent !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 10px 0 !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
--lumiverse-bg-elevated: rgba(18, 27, 35, 0.38) !important;
--lumiverse-card-bg: rgba(18, 27, 35, 0.38) !important;
--lumiverse-fill-strong: rgba(18, 27, 35, 0.40) !important;
--lumiverse-fill-medium: rgba(20, 32, 42, 0.28) !important;
--lumiverse-fill: rgba(255, 255, 255, 0.05) !important;
--lumiverse-fill-subtle: rgba(255, 255, 255, 0.03) !important;
--lumiverse-border: rgba(255, 255, 255, 0.1) !important;
--lumiverse-border-hover: rgba(142, 197, 190, 0.35) !important;
}
[class*="_htmlIsland_"] > *,
[data-lumiverse-html-island] > * {
backdrop-filter: blur(16px) !important;
-webkit-backdrop-filter: blur(16px) !important;
}
/* ── 12. Reasoning Dropdowns ── */
[data-component="MinimalMessage"] [class*="_container_14i0r_"] {
margin: 6px 0 10px 0 !important;
}
[data-component="MinimalMessage"] [data-reasoning-toggle="true"] {
background: rgba(255, 255, 255, 0.03) !important;
border: 1px solid rgba(255, 255, 255, 0.06) !important;
border-radius: 999px !important;
padding: 4px 12px !important;
color: var(--lumiverse-text-muted) !important;
transition: all 0.15s ease !important;
}
[data-component="MinimalMessage"] [data-reasoning-toggle="true"]:hover {
background: rgba(142, 197, 190, 0.08) !important;
border-color: rgba(142, 197, 190, 0.25) !important;
color: var(--lumiverse-primary-text) !important;
}
[data-component="MinimalMessage"] [class*="_body_14i0r_"],
[data-component="MinimalMessage"] [class*="_bodyInner_14i0r_"] {
background: rgba(10, 16, 21, 0.35) !important;
border: 1px solid rgba(255, 255, 255, 0.05) !important;
border-radius: 14px !important;
color: var(--lumiverse-text-muted) !important;
padding: 12px 16px !important;
margin-top: 8px !important;
font-size: 13px !important;
line-height: 1.6 !important;
}
/* ── 13. Floating Glass Input Composer & SEAMLESS EXTENSION CAPSULE ── */
[data-component="InputArea"] {
background: transparent !important;
border: none !important;
padding: 8px 16px 20px 16px !important;
}
#ri-panel {
background: rgba(12, 19, 26, 0.92) !important;
backdrop-filter: blur(28px) !important;
-webkit-backdrop-filter: blur(28px) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 18px 18px 0 0 !important;
box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.55) !important;
overflow: hidden !important;
}
/* Seamless #ri-toolbar floating pill capsule */
[data-component="InputArea"] div#ri-toolbar,
div#ri-toolbar {
background: rgba(14, 22, 29, 0.5) !important;
backdrop-filter: blur(16px) !important;
-webkit-backdrop-filter: blur(16px) !important;
border: 1px solid var(--lumiverse-border) !important;
border-radius: 999px !important;
padding: 3px 10px !important;
margin: 0 0 8px 0 !important;
width: fit-content !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
display: flex !important;
align-items: center !important;
gap: 5px !important;
}
.ri-icon-btn {
width: 26px !important;
height: 26px !important;
border-radius: 999px !important;
border: 1px solid transparent !important;
color: var(--lumiverse-text-dim) !important;
background: transparent !important;
transition: all 0.15s ease !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
.ri-icon-btn:hover {
color: var(--lumiverse-text) !important;
background: rgba(255, 255, 255, 0.08) !important;
}
.ri-icon-btn.ri-on {
border-color: rgba(142, 197, 190, 0.35) !important;
color: var(--lumiverse-primary) !important;
background: rgba(142, 197, 190, 0.15) !important;
}
#ri-divider {
background: rgba(255, 255, 255, 0.1) !important;
height: 14px !important;
width: 1px !important;
margin: 0 2px !important;
}
#ri-panel .ri-ta,
#ri-panel .ri-simple-ta,
#ri-panel .ri-preview,
#ri-panel .ri-draft-box,
#ri-panel .ri-select,
#ri-panel #ri-preset-select {
background: rgba(8, 14, 19, 0.8) !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
color: var(--lumiverse-text) !important;
border-radius: 10px !important;
}
#ri-panel .ri-ta:focus,
#ri-panel .ri-simple-ta:focus,
#ri-panel .ri-select:focus,
#ri-panel #ri-preset-select:focus {
border-color: var(--lumiverse-primary) !important;
box-shadow: 0 0 0 2px rgba(142, 197, 190, 0.18) !important;
outline: none !important;
}
/* Action Bar Pills */
[data-component="InputArea"] [class*="_actionBar_"] {
background: rgba(14, 22, 29, 0.5) !important;
backdrop-filter: blur(16px) !important;
-webkit-backdrop-filter: blur(16px) !important;
border: 1px solid var(--lumiverse-border) !important;
border-radius: 999px !important;
padding: 3px 8px !important;
margin-bottom: 8px !important;
width: fit-content !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
}
[data-component="InputArea"] [class*="_actionBtn_"] {
border-radius: 999px !important;
color: var(--lumiverse-text-dim) !important;
transition: all 0.15s ease !important;
}
[data-component="InputArea"] [class*="_actionBtn_"]:hover {
color: var(--lumiverse-text) !important;
background: rgba(255, 255, 255, 0.08) !important;
}
/* Main Message Textbox Capsule */
[data-component="InputArea"] [class*="_inputRow_"] {
background: rgba(18, 27, 35, 0.55) !important;
backdrop-filter: blur(20px) !important;
-webkit-backdrop-filter: blur(20px) !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
border-radius: 28px !important;
padding: 4px 8px 4px 14px !important;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
[data-component="InputArea"] [class*="_inputRow_"]:focus-within {
border-color: rgba(142, 197, 190, 0.45) !important;
box-shadow: 0 8px 36px rgba(0, 0, 0, 0.42), 0 0 0 3px rgba(142, 197, 190, 0.12) !important;
}
[data-component="InputArea"] textarea {
color: var(--lumiverse-text) !important;
font-size: 14.5px !important;
}
[data-component="InputArea"] textarea::placeholder {
color: var(--lumiverse-text-dim) !important;
}
[data-component="InputArea"] [class*="_sendBtn_"] {
background: var(--lumiverse-primary) !important;
color: #071015 !important;
border-radius: 999px !important;
transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease !important;
}
[data-component="InputArea"] [class*="_sendBtn_"]:hover {
background: var(--lumiverse-primary-hover) !important;
transform: scale(1.05) !important;
box-shadow: 0 0 16px rgba(142, 197, 190, 0.4) !important;
}
/* ── 14. Complete Modal & Popup Registry ── */
[class*="_modal_eh7mo_"],
[class*="_modal_1x2kb_"],
[class*="_modal_1jxzd_"],
[class*="_modal_plwew_"],
[class*="_modal_twxfy_"],
[class*="_modal_1tdcv_"],
[class*="_modal_o6t6w_"],
[class*="_modal_vnxgd_"],
[class*="_modal_1meyu_"],
[class*="_modal_gu4hh_"],
[class*="_modal_122wj_"],
[class*="_modal_5vogh_"],
[class*="_presetManagerModal_1dse2_"],
[class*="_shell_dnmps_"],
[role="dialog"] {
background: rgba(14, 22, 29, 0.88) !important;
backdrop-filter: blur(24px) !important;
-webkit-backdrop-filter: blur(24px) !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
border-radius: 20px !important;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
color: var(--lumiverse-text) !important;
}
[class*="_header_"] h2,
[class*="_header_"] h3,
[class*="_title_"] {
color: var(--lumiverse-text) !important;
font-weight: 600 !important;
letter-spacing: 0.01em !important;
}
[role="dialog"] input[type="text"],
[role="dialog"] input[type="search"],
[role="dialog"] textarea,
[role="dialog"] select,
[class*="_textarea_"],
[class*="_fieldTextarea_"],
[class*="_monoInput_"],
[class*="_searchInput_"] {
background: rgba(8, 14, 19, 0.55) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
border-radius: 12px !important;
color: var(--lumiverse-text) !important;
padding: 8px 12px !important;
transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
[role="dialog"] input:focus,
[role="dialog"] textarea:focus,
[role="dialog"] select:focus {
border-color: var(--lumiverse-primary) !important;
box-shadow: 0 0 0 2px rgba(142, 197, 190, 0.15) !important;
outline: none !important;
}
[class*="_tab_"],
[class*="_viewTab_"] {
border-radius: 999px !important;
font-weight: 500 !important;
color: var(--lumiverse-text-dim) !important;
transition: all 0.15s ease !important;
}
[class*="_tabActive_"],
[class*="_viewTabActive_"],
[role="tab"][aria-selected="true"] {
background: rgba(142, 197, 190, 0.15) !important;
color: var(--lumiverse-primary-text) !important;
border: 1px solid rgba(142, 197, 190, 0.3) !important;
}
button[class*="_btn_"],
[class*="_btn_1jhj2_"] {
border-radius: 999px !important;
transition: all 0.15s ease !important;
}
[class*="_dropdownMenu_1dse2_"] {
background: rgba(14, 22, 29, 0.9) !important;
backdrop-filter: blur(20px) !important;
-webkit-backdrop-filter: blur(20px) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 16px !important;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5) !important;
padding: 6px !important;
}
[class*="_menuButton_1dse2_"] {
border-radius: 10px !important;
color: var(--lumiverse-text) !important;
padding: 6px 10px !important;
}
[class*="_menuButton_1dse2_"]:hover {
background: rgba(142, 197, 190, 0.12) !important;
color: var(--lumiverse-primary-text) !important;
}
/* ── 15. Right-Hand Drawer Navigation ── */
[class*="_sidebar_1prou_"] {
background: rgba(10, 16, 21, 0.75) !important;
backdrop-filter: blur(16px) !important;
-webkit-backdrop-filter: blur(16px) !important;
border-left: 1px solid rgba(255, 255, 255, 0.06) !important;
}
[class*="_tabBtn_1prou_"] {
border-radius: 14px !important;
color: var(--lumiverse-text-dim) !important;
transition: all 0.15s ease !important;
}
[class*="_tabBtn_1prou_"]:hover {
color: var(--lumiverse-text) !important;
background: rgba(255, 255, 255, 0.05) !important;
}
[class*="_tabBtnActive_1prou_"] {
color: var(--lumiverse-primary) !important;
background: rgba(142, 197, 190, 0.12) !important;
}
/* ── 16. Portrait Gallery: Left-Docked Manila Folder Mechanism (DESKTOP ONLY) ── */
@media (min-width: 769px) {
[class*="_portraitSide_"],
[class*="_portraitSideRight_"] {
position: fixed !important;
left: 0 !important;
right: auto !important;
top: 50% !important;
transform: translateY(-50%) !important;
z-index: 60 !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
pointer-events: none !important;
margin: 0 !important;
padding: 0 !important;
}
[class*="_panelOuter_"],
[class*="_panelOuterRight_"] {
order: 1 !important;
position: relative !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
width: 260px !important;
min-width: 260px !important;
max-width: 260px !important;
margin: 0 !important;
margin-left: -260px !important;
opacity: 0 !important;
pointer-events: none !important;
transform: none !important;
transition: margin-left 0.28s cubic-bezier(0.16, 1, 0.3, 1),
opacity 0.2s ease !important;
}
[class*="_portraitSide_"]:has([class*="_portraitTabActive_"]) [class*="_panelOuter_"],
[class*="_portraitTabActive_"] ~ [class*="_panelOuter_"],
[class*="_panelOuter_"][class*="_active_"],
[class*="_panelOuter_"][class*="_open_"] {
margin-left: 0 !important;
opacity: 1 !important;
pointer-events: auto !important;
}
[class*="_panel_1uvlh_"] {
background: rgba(14, 23, 30, 0.88) !important;
backdrop-filter: blur(24px) !important;
-webkit-backdrop-filter: blur(24px) !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
border-left: none !important;
border-radius: 0 18px 18px 0 !important;
box-shadow: 8px 12px 36px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
padding: 14px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
box-sizing: border-box !important;
width: 100% !important;
}
[class*="_frame_1uvlh_"] {
border-radius: 12px !important;
overflow: hidden !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
width: 100% !important;
}
[class*="_name_1uvlh_"] {
font-family: var(--lumiverse-font-family) !important;
font-size: 15px !important;
font-weight: 600 !important;
color: var(--lumiverse-primary-text) !important;
margin-top: 10px !important;
letter-spacing: 0.02em !important;
}
[class*="_closeBtn_1uvlh_"] {
color: var(--lumiverse-text-dim) !important;
transition: color 0.14s ease !important;
}
[class*="_closeBtn_1uvlh_"]:hover {
color: var(--lumiverse-text) !important;
}
button[class*="_portraitTab_"],
button[aria-label="Toggle portrait panel"] {
order: 2 !important;
position: relative !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
transform: none !important;
pointer-events: auto !important;
width: 24px !important;
height: 48px !important;
min-width: 24px !important;
min-height: 48px !important;
padding: 0 !important;
margin: 0 !important;
margin-left: -1px !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
border-left: none !important;
border-radius: 0 10px 10px 0 !important;
background: rgba(14, 23, 30, 0.88) !important;
backdrop-filter: blur(24px) !important;
-webkit-backdrop-filter: blur(24px) !important;
box-shadow: 4px 6px 18px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
color: var(--lumiverse-text-dim) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
z-index: 10 !important;
transition: width 0.16s ease, background 0.16s ease, color 0.16s ease !important;
}
button[class*="_portraitTab_"]:hover,
button[aria-label="Toggle portrait panel"]:hover {
width: 28px !important;
background: rgba(20, 32, 42, 0.95) !important;
color: var(--lumiverse-primary-text) !important;
}
button[class*="_portraitTabActive_"],
button[aria-label="Toggle portrait panel"][class*="_active_"] {
background: rgba(14, 23, 30, 0.88) !important;
border-color: rgba(255, 255, 255, 0.16) !important;
color: var(--lumiverse-primary-text) !important;
}
button[class*="_portraitTab_"] svg,
button[aria-label="Toggle portrait panel"] svg {
width: 13px !important;
height: 13px !important;
opacity: 0.6 !important;
transition: opacity 0.15s ease !important;
}
button[class*="_portraitTab_"]:hover svg,
button[aria-label="Toggle portrait panel"]:hover svg {
opacity: 1 !important;
}
}
/* ── 17. Scrollbars ── */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.1);
border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(142, 197, 190, 0.3);
}
/* ==========================================================================
── 18. MOBILE RESPONSIVENESS OVERHAUL (max-width: 768px) ──
========================================================================== */
@media (max-width: 768px) {
/* 1. Nuke the portrait gallery completely on mobile so it can never cut the viewport in half */
[class*="_portraitSide_"],
[class*="_portraitSideRight_"] {
display: none !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
/* 2. Force chat surface & column to 100% full height */
[data-lumiverse-surface="chat-body"],
[data-lumiverse-surface="chat-column"],
[data-lumiverse-surface="chat-column-inner"] {
height: 100% !important;
min-height: 100% !important;
flex: 1 1 100% !important;
max-height: 100% !important;
}
/* 3. Mobile Message Stream Padding */
[data-component="MinimalMessage"],
[data-component="MinimalMessage"][data-part="character"],
[data-component="MinimalMessage"][data-part="user"] {
margin: 20px 4px 16px 4px !important;
}
[data-component="MinimalMessage"] [class*="_header_"] {
height: 58px !important;
min-height: 58px !important;
min-width: 230px !important;
max-width: 88vw !important;
margin-bottom: 30px !important;
}
[data-component="MinimalMessage"] [class*="_avatar_"] {
height: 58px !important;
width: 110px !important;
min-width: 110px !important;
max-width: 110px !important;
}
[data-part="character"] [class*="_header_"] {
padding-left: 115px !important;
}
[data-part="user"] [class*="_header_"] {
padding-right: 115px !important;
}
[data-component="MinimalMessage"] [class*="_name_"] {
font-size: 13px !important;
letter-spacing: 0.1em !important;
}
[data-component="MinimalMessage"] [data-component="MessageContent"] {
padding: 14px 16px !important;
}
/* Actions drop beneath the story card on mobile */
[data-component="MinimalMessage"] [class*="_actionsWrap_"] {
position: static !important;
opacity: 0.85 !important;
pointer-events: auto !important;
margin-top: 6px !important;
transform: none !important;
}
[data-part="character"] [class*="_actionsWrap_"] {
justify-content: flex-end !important;
}
[data-part="user"] [class*="_actionsWrap_"] {
justify-content: flex-start !important;
}
[data-component="MinimalMessage"] [class*="_actions_"] {
flex-direction: row !important;
background: rgba(14, 22, 29, 0.7) !important;
border-radius: 999px !important;
padding: 3px 8px !important;
}
[data-component="MinimalMessage"] [class*="_actions_"] button {
width: 26px !important;
height: 26px !important;
border-radius: 50% !important;
}
}
/* ZEN RAIN · balanced message portraits, quiet-line toolbar, incoming-call gallery */
/* Message identity capsule at exactly 1.5× the original Zen Rain geometry. */
[data-component="MinimalMessage"] > [class*="_bubble_"] > [class*="_header_"] {
height: 108px !important;
min-height: 108px !important;
min-width: min(480px, 100%) !important;
max-width: min(780px, 100%) !important;
border-radius: 28px !important;
margin-bottom: 36px !important;
background: linear-gradient(120deg, rgba(14, 23, 30, .68), rgba(18, 31, 39, .48)) !important;
box-shadow: 0 12px 34px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .16) !important;
}
[data-component="MinimalMessage"] > [class*="_avatar_"] {
width: 233px !important;
min-width: 233px !important;
max-width: 233px !important;
height: 108px !important;
}
[data-component="MinimalMessage"][data-part="character"] > [class*="_bubble_"] > [class*="_header_"] {
padding-left: 233px !important;
padding-right: 42px !important;
}
[data-component="MinimalMessage"][data-part="user"] > [class*="_bubble_"] > [class*="_header_"] {
padding-right: 233px !important;
padding-left: 42px !important;
}
[data-component="MinimalMessage"][data-part="character"] > [class*="_avatar_"] {
border-radius: 28px 0 0 28px !important;
}
[data-component="MinimalMessage"][data-part="user"] > [class*="_avatar_"] {
border-radius: 0 28px 28px 0 !important;
}
[data-component="MinimalMessage"] > [class*="_bubble_"] > [class*="_header_"] > [class*="_name_"] {
min-width: 0 !important;
max-width: 100% !important;
font-size: 23px !important;
letter-spacing: .11em !important;
overflow-wrap: anywhere !important;
text-wrap: balance !important;
}
[data-component="MinimalMessage"] > [class*="_bubble_"] > [class*="_header_"] > [class*="_metaPill_"] {
font-size: 11px !important;
padding: 3px 10px !important;
}
/* The native top dock keeps its original footprint while gaining a soft
communication-console treatment. Its real buttons remain fully functional. */
[data-component="ChatView"] [data-spindle-mount="chat_top_dock"] {
box-sizing: border-box !important;
width: fit-content !important;
max-width: calc(100% - 20px) !important;
min-height: 39px !important;
margin: 2px auto 8px !important;
padding: 3px 7px 3px 15px !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
color: var(--lumiverse-text-muted) !important;
border: 1px solid rgba(205, 241, 237, .2) !important;
border-radius: 999px !important;
background: linear-gradient(115deg, rgba(31, 53, 61, .62), rgba(12, 22, 29, .64)) !important;
backdrop-filter: blur(22px) saturate(1.25) !important;
-webkit-backdrop-filter: blur(22px) saturate(1.25) !important;
box-shadow: 0 6px 22px rgba(0, 0, 0, .27), inset 0 1px 0 rgba(255, 255, 255, .15) !important;
}
[data-component="ChatView"] [data-spindle-mount="chat_top_dock"]::before {
content: "✦ QUIET LINE";
white-space: nowrap;
font-family: var(--lumiverse-font-family) !important;
font-size: 10px;
font-weight: 800;
letter-spacing: .16em;
color: var(--lumiverse-primary-text);
text-shadow: 0 0 12px rgba(142, 197, 190, .36);
pointer-events: none;
}
[data-component="ChatView"] [data-spindle-mount="chat_top_dock"] [class*="_nativeDockActions_"] {
display: flex !important;
align-items: center !important;
gap: 4px !important;
}
[data-component="ChatView"] [data-spindle-mount="chat_top_dock"] button[class*="_toolbarBtn_"] {
width: 30px !important;
height: 30px !important;
min-width: 30px !important;
border: 1px solid transparent !important;
border-radius: 50% !important;
background: rgba(255, 255, 255, .045) !important;
color: var(--lumiverse-text-muted) !important;
box-shadow: none !important;
transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease !important;
}
[data-component="ChatView"] [data-spindle-mount="chat_top_dock"] button[class*="_toolbarBtn_"]:is(:hover, :focus-visible),
[data-component="ChatView"] [data-spindle-mount="chat_top_dock"] button[class*="_toolbarBtn_"][aria-pressed="true"] {
background: rgba(142, 197, 190, .2) !important;
border-color: rgba(142, 197, 190, .35) !important;
color: var(--lumiverse-primary-text) !important;
transform: translateY(-1px) !important;
}
[data-component="ChatView"] [data-spindle-mount="chat_top_dock"] button:focus-visible {
outline: 2px solid var(--lumiverse-primary) !important;
outline-offset: 2px !important;
}
/* Incoming-call gallery. Lumiverse supplies the caller name, chat count,
and latest activity date; the rest is a visual treatment around those values. */
/* Native virtual rows, transforms, column counts and spacer heights are
intentionally untouched, following Wired Chassis / Glassheart. */
[data-component="LandingPageChats"] [class*="_cardTilt_"] {
min-width: 0 !important;
}
[data-component="LandingPageChats"] [class*="_cardTilt_"] > [class*="_card_"] {
position: relative !important;
height: auto !important;
container-type: inline-size;
box-sizing: border-box !important;
border: 1px solid rgba(225, 250, 247, .34) !important;
border-radius: 30px !important;
background:
radial-gradient(circle at 50% 4%, rgba(199, 239, 235, .18), transparent 38%),
linear-gradient(145deg, rgba(39, 63, 72, .7), rgba(12, 25, 33, .68)) !important;
box-shadow: 0 16px 44px rgba(5, 13, 18, .32), inset 0 1px 0 rgba(255, 255, 255, .2) !important;
backdrop-filter: blur(22px) saturate(1.12) !important;
-webkit-backdrop-filter: blur(22px) saturate(1.12) !important;
overflow: hidden !important;
transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease !important;
}
[data-component="LandingPageChats"] [class*="_cardTilt_"] > [class*="_card_"]::before {
content: "✦ ZEN LINE · INCOMING";
position: absolute;
z-index: 6;
top: 4%;
left: 50%;
transform: translateX(-50%);
max-width: 88%;
padding: 1.4cqw 3cqw;
border: 1px solid rgba(210, 244, 240, .2);
border-radius: 999px;
background: rgba(8, 20, 27, .38);
color: rgba(218, 247, 243, .82);
font-size: 3cqw;
font-weight: 800;
letter-spacing: .13em;
text-align: center;
white-space: nowrap;
pointer-events: none;
}
[data-component="LandingPageChats"] [class*="_cardTilt_"]:hover > [class*="_card_"],
[data-component="LandingPageChats"] [class*="_cardTilt_"]:focus-within > [class*="_card_"] {
border-color: rgba(166, 233, 224, .76) !important;
box-shadow: 0 22px 54px rgba(6, 14, 20, .46), 0 0 28px rgba(142, 197, 190, .2), inset 0 1px 0 rgba(255, 255, 255, .24) !important;
transform: translateY(-4px) !important;
}
[data-component="LandingPageChats"] [class*="_cardBtn_"] {
position: relative !important;
display: block !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
aspect-ratio: 3 / 4 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
box-sizing: border-box !important;
isolation: isolate !important;
overflow: hidden !important;
}
[data-component="LandingPageChats"] [class*="_cardImage_"] {
position: absolute !important;
grid-column: 1 / -1 !important;
grid-row: 1 !important;
justify-self: center !important;
box-sizing: border-box !important;
z-index: 3 !important;
inset: 14% auto auto 25% !important;
width: 50% !important;
height: auto !important;
aspect-ratio: 1 !important;
transform: none !important;
border: 3px solid rgba(226, 250, 247, .72) !important;
border-radius: 50% !important;
background: rgba(5, 14, 20, .58) !important;
box-shadow: 0 12px 34px rgba(0, 0, 0, .38), 0 0 0 8px rgba(142, 197, 190, .08), 0 0 36px rgba(142, 197, 190, .22) !important;
overflow: hidden !important;
transition: box-shadow .22s ease, transform .22s ease !important;
}
[data-component="LandingPageChats"] [class*="_cardTilt_"]:hover [class*="_cardImage_"],
[data-component="LandingPageChats"] [class*="_cardTilt_"]:focus-within [class*="_cardImage_"] {
transform: scale(1.035) !important;
box-shadow: 0 14px 38px rgba(0, 0, 0, .42), 0 0 0 9px rgba(142, 197, 190, .12), 0 0 42px rgba(142, 197, 190, .32) !important;
}
[data-component="LandingPageChats"] [class*="_cardImage_"] img,
[data-component="LandingPageChats"] [class*="_cardAvatarFallback_"] {
width: 100% !important;
height: 100% !important;
border-radius: 50% !important;
object-fit: cover !important;
}
[data-component="LandingPageChats"] [class*="_cardImageOverlay_"] {
display: none !important;
}
[data-component="LandingPageChats"] [class*="_cardContent_"] {
position: absolute !important;
grid-column: 1 / -1 !important;
grid-row: 2 !important;
z-index: 4 !important;
inset: 55% 6% auto !important;
min-width: 0 !important;
width: auto !important;
padding: 0 !important;
text-align: center !important;
}
[data-component="LandingPageChats"] [class*="_cardName_"] {
display: flex !important;
justify-content: center !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 1cqw !important;
margin: 0 !important;
line-height: 1.25 !important;
color: #f4fcfb !important;
font-family: var(--lumiverse-font-family) !important;
font-size: 5.7cqw !important;
font-weight: 800 !important;
letter-spacing: .04em !important;
text-shadow: 0 2px 10px rgba(0, 0, 0, .65) !important;
white-space: normal !important;
text-wrap: balance !important;
}
[data-component="LandingPageChats"] [class*="_cardName_"] > span {
max-width: calc(100% - 18px) !important;
white-space: normal !important;
overflow-wrap: anywhere !important;
display: -webkit-box !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 1 !important;
overflow: hidden !important;
}
[data-component="LandingPageChats"] [class*="_cardName_"]::after {
content: "is calling…";
display: block;
flex-basis: 100%;
margin-top: -1px;
color: rgba(211, 237, 238, .72);
font-size: 2.9cqw;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
}
[data-component="LandingPageChats"] [class*="_cardMeta_"] {
position: relative !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
gap: 2cqw !important;
height: 11cqw !important;
min-height: 0 !important;
box-sizing: border-box !important;
flex-wrap: nowrap !important;
margin-top: 7cqw !important;
padding: 1cqw 2cqw !important;
border: 1px solid rgba(255, 255, 255, .19) !important;
border-radius: 18px !important;
background: rgba(227, 243, 246, .87) !important;
color: #31444c !important;
font-size: 3cqw !important;
text-shadow: none !important;
box-shadow: 0 8px 22px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .65) !important;
}
[data-component="LandingPageChats"] [class*="_cardMeta_"]::before {
content: "LAST CONTACT";
position: absolute;
bottom: calc(100% + 1.5cqw);
left: 50%;
transform: translateX(-50%);
color: rgba(220, 242, 241, .78);
font-size: 2.6cqw;
font-weight: 800;
letter-spacing: .13em;
white-space: nowrap;
}
[data-component="LandingPageChats"] [class*="_chatCountBadge_"] {
font-size: inherit !important;
padding: .5cqw 1.5cqw !important;
border-color: rgba(70, 112, 111, .18) !important;
background: rgba(102, 155, 150, .12) !important;
color: #3c6664 !important;
}
[data-component="LandingPageChats"] [class*="_cardTime_"] {
font-size: inherit !important;
color: #52686f !important;
font-weight: 700 !important;
}
/* The whole card remains Lumiverse's real open-chat button. The two large
controls are decorative call-screen flavor, per the user's request. */
[data-component="LandingPageChats"] [class*="_cardBtn_"]::before,
[data-component="LandingPageChats"] [class*="_cardBtn_"]::after {
position: absolute;
grid-row: 3;
z-index: 5;
inset: auto auto 4%;
align-self: end;
width: 16cqw;
height: 16cqw;
display: grid;
place-items: center;
box-sizing: border-box;
border: 1px solid rgba(255, 255, 255, .32);
border-radius: 50%;
color: #f8ffff;
font-family: "Segoe UI Symbol", "Arial Unicode MS", sans-serif;
font-size: 7cqw;
line-height: 1;
pointer-events: none;
text-shadow: 0 2px 5px rgba(0, 0, 0, .2);
box-shadow: 0 9px 24px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .3);
transition: transform .2s ease, filter .2s ease;
}
[data-component="LandingPageChats"] [class*="_cardBtn_"]::before {
content: "\1F4DE\FE0E";
grid-column: 1;
left: 27%;
justify-self: end;
background: linear-gradient(145deg, #71cfc1, #3d9f91);
transform: rotate(-18deg);
}
[data-component="LandingPageChats"] [class*="_cardBtn_"]::after {
content: "\1F4DE\FE0E";
grid-column: 2;
right: 27%;
justify-self: start;
background: linear-gradient(145deg, #d87c85, #a94755);
transform: rotate(135deg);
}
[data-component="LandingPageChats"] [class*="_cardBtn_"]:is(:hover, :focus-visible)::before {
transform: rotate(-18deg) scale(1.08);
filter: brightness(1.08);
}
[data-component="LandingPageChats"] [class*="_cardBtn_"]:is(:hover, :focus-visible)::after {
transform: rotate(135deg) scale(1.08);
filter: brightness(1.08);
}
[data-component="LandingPageChats"] [class*="_cardBtn_"]:focus-visible {
outline: 2px solid var(--lumiverse-primary) !important;
outline-offset: -3px !important;
}
[data-component="LandingPageChats"] [class*="_deleteBtn_"] {
z-index: 8 !important;
top: 14px !important;
right: 14px !important;
border-radius: 50% !important;
background: rgba(7, 18, 24, .42) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
}
/* A readable rain-window masthead, including the existing landing actions. */
[data-component="LandingPageHeader"] {
position: relative !important;
isolation: isolate !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
flex-wrap: wrap !important;
gap: 20px !important;
padding: 24px 28px !important;
margin-bottom: 22px !important;
border: 1px solid rgba(222, 248, 244, .32) !important;
border-radius: 26px !important;
background:
radial-gradient(ellipse at 12% 0%, rgba(151, 212, 205, .19), transparent 58%),
linear-gradient(120deg, rgba(15, 32, 42, .87), rgba(29, 51, 61, .7)) !important;
backdrop-filter: blur(24px) saturate(1.15) !important;
-webkit-backdrop-filter: blur(24px) saturate(1.15) !important;
box-shadow: 0 12px 34px rgba(5, 17, 25, .24), inset 0 1px 0 rgba(255, 255, 255, .2) !important;
box-sizing: border-box !important;
}
[data-component="LandingPageHeader"]::before {
content: "";
position: absolute;
z-index: 0;
inset: 0;
border-radius: inherit;
clip-path: inset(0 round 26px);
pointer-events: none;
opacity: .6;
background-image:
radial-gradient(ellipse 1px 24px at 20px 28px, rgba(224, 252, 251, .42), transparent 90%),
radial-gradient(ellipse .8px 13px at 48px 44px, rgba(222, 253, 250, .3), transparent 90%);
background-size: 81px 96px, 123px 137px;
background-position: 0 0, 19px -40px;
animation: zen-rain-window 8s linear infinite;
}
[data-component="LandingPageHeader"] > * {
position: relative !important;
z-index: 1 !important;
}
[data-component="LandingPageHeader"] [class*="_logo_"] {
display: flex !important;
align-items: center !important;
gap: 16px !important;
}
[data-component="LandingPageHeader"] [class*="_logoIcon_"] {
width: 60px !important;
height: 60px !important;
display: grid !important;
place-items: center !important;
border: 1px solid rgba(198, 245, 236, .35) !important;
border-radius: 19px !important;
background: linear-gradient(145deg, rgba(168, 221, 216, .19), rgba(14, 31, 42, .48)) !important;
box-shadow: 0 6px 18px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .22) !important;
}
[data-component="LandingPageHeader"] [class*="_logoText_"]::before {
content: "ZEN RAIN / STORY SWITCHBOARD";
display: block;
margin-bottom: 3px;
color: #a8d8d2;
font-size: 9px;
font-weight: 800;
letter-spacing: .16em;
}
[data-component="LandingPageHeader"] h1 {
margin: 0 !important;
color: #f1fffc !important;
font-size: clamp(26px, 2.3vw, 34px) !important;
font-weight: 800 !important;
letter-spacing: -.025em !important;
line-height: 1.15 !important;
text-shadow: 0 2px 12px rgba(0, 0, 0, .45) !important;
}
[data-component="LandingPageHeader"] [class*="_taglineBtn_"] {
padding: 0 !important;
margin-top: 5px !important;
border: 0 !important;
background: transparent !important;
color: #c5e8e4 !important;
font-size: 12px !important;
}
[data-component="LandingPageHeader"] [class*="_headerActions_"] {
display: flex !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 8px !important;
min-width: 0 !important;
}
[data-component="LandingPageHeader"] [class*="_accountBtn_"] {
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
min-height: 36px !important;
border: 1px solid rgba(204, 240, 235, .25) !important;
border-radius: 999px !important;
background: rgba(7, 24, 34, .56) !important;
color: #d9f3ef !important;
padding: 8px 13px !important;
}
[data-component="LandingPageHeader"] [class*="_accountName_"] {
min-width: 0 !important;
color: #d9f3ef !important;
}
[data-component="LandingPageHeader"] [class*="_tempChatWrap_"] {
min-width: 0 !important;
max-width: 100% !important;
}
[data-component="LandingPageHeader"] [class*="_accountBtn_"]:hover {
background: rgba(107, 179, 166, .25) !important;
border-color: rgba(196, 245, 232, .53) !important;
}
[data-component="LandingPageTabs"] {
display: flex !important;
align-items: center !important;
gap: 8px !important;
margin-bottom: 22px !important;
}
[data-component="LandingPageTabs"] [class*="_searchField_"] {
flex: 1 !important;
min-width: 0 !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
padding: 12px 14px !important;
border: 1px solid rgba(221, 244, 241, .28) !important;
border-radius: 18px !important;
background: rgba(17, 35, 46, .73) !important;
backdrop-filter: blur(18px) !important;
-webkit-backdrop-filter: blur(18px) !important;
color: #d9f4ed !important;
}
[data-component="LandingPageTabs"] input {
width: 100% !important;
min-width: 0 !important;
border: 0 !important;
background: transparent !important;
color: #effbf7 !important;
outline: none !important;
}
[data-component="LandingPageTabs"] input::placeholder {
color: #c0d7da !important;
}
[data-component="LandingPageTabs"] :is([class*="_iconButton_"], [class*="_hiddenManagerBtn_"]) {
flex-shrink: 0 !important;
width: 36px !important;
height: 36px !important;
border: 1px solid rgba(215, 242, 238, .26) !important;
border-radius: 12px !important;
background: rgba(18, 37, 48, .78) !important;
color: #d6f3eb !important;
}
@keyframes zen-rain-window {
from { background-position: 0 0, 19px -40px; }
to { background-position: -3px 96px, 17px 97px; }
}
/* Swipe navigation remains legible against both bright and dark wallpaper. */
[data-component="SwipeControls"] {
width: fit-content !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
margin-top: 8px !important;
padding: 4px 6px !important;
border: 1px solid rgba(202, 239, 231, .4) !important;
border-radius: 999px !important;
background: rgba(12, 29, 39, .82) !important;
backdrop-filter: blur(16px) !important;
-webkit-backdrop-filter: blur(16px) !important;
opacity: 1 !important;
color: #e3fff4 !important;
box-shadow: 0 5px 16px rgba(0, 0, 0, .27) !important;
}
[data-component="SwipeControls"] button {
width: 30px !important;
height: 30px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border: 1px solid rgba(187, 232, 220, .25) !important;
border-radius: 50% !important;
background: rgba(135, 197, 183, .17) !important;
color: #e3fff4 !important;
opacity: 1 !important;
}
[data-component="SwipeControls"] [class*="_counter_"] {
color: #e3fff4 !important;
font-size: 12px !important;
font-weight: 700 !important;
text-shadow: none !important;
}
[data-component="SwipeControls"] button:is(:hover, :focus-visible):not(:disabled) {
background: rgba(155, 223, 204, .34) !important;
border-color: #b5e4d2 !important;
}
[data-component="SwipeControls"] button:disabled {
color: #a3babd !important;
background: rgba(109, 144, 143, .09) !important;
}
/* Frosted Thinking toggle and one glass panel for the expanded reasoning. */
[data-component="MinimalMessage"] :has(> [data-reasoning-toggle="true"]),
[data-component="MinimalMessage"] [data-reasoning-toggle="true"] ~ [class*="_bodyWrapper_"] {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
[data-component="MinimalMessage"] [data-reasoning-toggle="true"] {
background:
radial-gradient(rgba(239, 253, 251, .05) .35px, transparent .55px) 0 0 / 3px 3px,
linear-gradient(110deg, rgba(178, 217, 220, .23), rgba(82, 122, 135, .32)) !important;
background-color: rgba(57, 85, 96, .18) !important;
border: 1px solid rgba(224, 250, 248, .3) !important;
border-radius: 14px !important;
padding: 8px 13px !important;
color: #e0f5f1 !important;
backdrop-filter: blur(22px) saturate(1.2) !important;
-webkit-backdrop-filter: blur(22px) saturate(1.2) !important;
box-shadow: 0 5px 18px rgba(0, 0, 0, .15), inset 0 1px 0 rgba(255, 255, 255, .24) !important;
}
[data-component="MinimalMessage"] [data-reasoning-toggle="true"]:hover {
border-color: rgba(205, 248, 231, .55) !important;
color: #f0fff7 !important;
}
[data-component="MinimalMessage"] [data-reasoning-toggle="true"] :is(svg, [class*="_label_"]) {
color: inherit !important;
}
[data-component="MinimalMessage"] [data-reasoning-toggle="true"] ~ [class*="_bodyWrapper_"] > [class*="_bodyInner_"] {
background: transparent !important;
border: 0 !important;
padding: 0 !important;
margin: 0 !important;
}
[data-component="MinimalMessage"] [data-reasoning-toggle="true"] ~ [class*="_bodyWrapper_"] [class*="_body_"] {
background:
radial-gradient(rgba(245, 255, 252, .04) .35px, transparent .55px) 0 0 / 3px 3px,
linear-gradient(120deg, rgba(102, 144, 157, .25), rgba(16, 37, 49, .46)) !important;
background-color: rgba(57, 85, 96, .18) !important;
backdrop-filter: blur(22px) saturate(1.15) !important;
-webkit-backdrop-filter: blur(22px) saturate(1.15) !important;
border: 1px solid rgba(224, 248, 245, .22) !important;
border-radius: 16px !important;
padding: 14px 16px !important;
margin-top: 8px !important;
color: #d5e8e5 !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18) !important;
}
@media (max-width: 768px) {
[data-component="MinimalMessage"] > [class*="_bubble_"] > [class*="_header_"] {
width: auto !important;
min-width: min(345px, 100%) !important;
max-width: 88vw !important;
height: 87px !important;
min-height: 87px !important;
border-radius: 24px !important;
}
[data-component="MinimalMessage"] > [class*="_avatar_"] {
width: 165px !important;
min-width: 165px !important;
max-width: 165px !important;
height: 87px !important;
}
[data-component="MinimalMessage"][data-part="character"] > [class*="_bubble_"] > [class*="_header_"] {
padding-left: 173px !important;
padding-right: 18px !important;
}
[data-component="MinimalMessage"][data-part="user"] > [class*="_bubble_"] > [class*="_header_"] {
padding-right: 173px !important;
padding-left: 18px !important;
}
[data-component="MinimalMessage"] > [class*="_bubble_"] > [class*="_header_"] > [class*="_name_"] {
font-size: 19.5px !important;
letter-spacing: .08em !important;
}
[data-component="ChatView"] [data-spindle-mount="chat_top_dock"] {
gap: 5px !important;
padding-left: 8px !important;
margin-bottom: 5px !important;
}
[data-component="ChatView"] [data-spindle-mount="chat_top_dock"]::before {
content: "✦";
font-size: 14px;
}
[data-component="LandingPageHeader"] {
padding: 18px !important;
}
[data-component="LandingPageHeader"] [class*="_logoText_"]::before {
font-size: 8px;
letter-spacing: .1em;
}
[data-component="LandingPageHeader"] [class*="_headerActions_"] {
width: 100% !important;
}
[data-component="LandingPageTabs"] {
flex-wrap: wrap !important;
}
[data-component="LandingPageTabs"] [class*="_searchField_"] {
flex-basis: 100% !important;
}
}
@media (prefers-reduced-motion: reduce) {
[data-component="LandingPageChats"] [class*="_cardTilt_"] > [class*="_card_"],
[data-component="LandingPageChats"] [class*="_cardImage_"],
[data-component="LandingPageChats"] [class*="_cardBtn_"]::before,
[data-component="LandingPageChats"] [class*="_cardBtn_"]::after,
[data-component="ChatView"] [data-spindle-mount="chat_top_dock"] button[class*="_toolbarBtn_"] {
transition: none !important;
}
[data-component="LandingPageHeader"]::before {
animation: none !important;
}
}
/* ZEN RAIN / AFTERHOURS — camera windows, voice bubbles and a rainy call log.
Native virtual gallery geometry remains untouched. */
:root {
--zr-mint: #bbf1dc;
--zr-ice: #c5e5f6;
--zr-rose: #f1b5bd;
--zr-edge: rgba(208, 247, 236, .28);
}
[data-zr-call] { margin: 26px auto 34px; width: 100%; min-width: 0; }
[data-component="MinimalMessage"] { margin: 26px auto 34px; width: 100%; min-width: 0; }
[data-zr-identity] { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0 16px; }
[data-zr-camera] {
position: relative; isolation: isolate; width: min(340px, 100%); aspect-ratio: 16/10;
margin: 0; overflow: hidden; border: 1px solid rgba(211, 248, 240, .55); border-radius: 23px;
background: linear-gradient(145deg, #45636a, #152a35);
box-shadow: 0 16px 40px #061b2559, 0 0 0 5px #bedfd90a, inset 0 1px #ffffff60;
}
[data-zr-camera] img { width: 100%!important; height: 100%!important; object-fit: cover!important; object-position: center 30%!important; border-radius: 0!important; mask-image: none!important; -webkit-mask-image: none!important; }
[data-zr-camera]::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg,#071c2cd9,transparent 48%), linear-gradient(130deg,#e1fff226,transparent 35%); border-radius: inherit; }
[data-zr-initial] { display: grid; place-items: center; height: 100%; font: 500 70px/1 var(--lumiverse-font-family); color: #cce9e3; }
[data-zr-camera-tag] { position: absolute; top: 12px; left: 12px; z-index: 2; padding: 5px 8px; border: 1px solid #cff5e74d; border-radius: 99px; background: #092c388c; backdrop-filter: blur(12px); color: #dcfff0; font: 9px/1.2 Consolas,monospace; letter-spacing: .14em; }
[data-zr-camera-tag]::before { content: '● '; color: #a5f0c6; }
[data-zr-camera] figcaption { position: absolute; bottom: 38px; left: 16px; right: 16px; z-index: 2; display: flex; justify-content: space-between; gap: 10px; color: #f0fffa; font-size: 17px; font-weight: 700; text-shadow: 0 2px 8px #0009; }
[data-zr-camera] figcaption > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-zr-signal] { color: #b3f0d3; font-size: 15px; }
[data-zr-camera-tools] { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); z-index: 2; border: 1px solid #d8efe52e; padding: 4px 16px; border-radius: 99px; color: #cde9e4; background: #152b3699; font: 12px/1.2 'Segoe UI Symbol',sans-serif; white-space: nowrap; }
[data-zr-call="local"] [data-zr-camera] { border-color: #d8dcf59e; box-shadow: 0 16px 40px #061b2559, 0 0 0 5px #dcd5ff0a; }
[data-component="MinimalMessage"][data-part="user"] [data-zr-camera] { border-color: #d8dcf59e; box-shadow: 0 16px 40px #061b2559, 0 0 0 5px #dcd5ff0a; }
[data-zr-call="local"] [data-zr-camera-tag] { color: #e9e4ff; }
[data-component="MinimalMessage"][data-part="user"] [data-zr-camera-tag] { color: #e9e4ff; }
/* CSS-only camera frame remains available before component activation. */
[data-component="MinimalMessage"] > [class*="_avatar_"] { isolation: isolate; border: 1px solid #cef2e761!important; box-shadow: inset 0 0 0 4px #0f2f3b44!important; }
[data-component="MinimalMessage"] > [class*="_avatar_"]::after { content: '◉ STORY CAMERA'; position: absolute; bottom: 8px; left: 10px; z-index: 5; padding: 4px 7px; border-radius: 99px; background: #0d2b3bbd; color: #c8eee0; font: 8px/1.2 Consolas,monospace; letter-spacing: .08em; pointer-events: none; }
[data-zr-line] { display: flex; gap: 15px; align-items: center; color: #d0e5e7; font: 10px/1.5 Consolas,monospace; letter-spacing: .08em; text-align: center; }
[data-zr-line] > span:not(:nth-child(2)) { color: #a3d9c7; }
/* Remove only the duplicated identity artwork; preserve native metadata,
controls, selection, editing, reasoning and attachments inside Original. */
[data-zr-native] [data-component="MinimalMessage"] { margin-top: 12px!important; }
[data-component="MinimalMessage"][data-component="MinimalMessage"] { margin-top: 12px!important; }
[data-zr-native] [data-component="MinimalMessage"] > [class*="_avatar_"] { display: none!important; }
[data-zr-native] [data-component="MinimalMessage"] > [class*="_bubble_"] > [class*="_header_"] {
position: relative!important; display: flex!important; justify-content: center!important;
width: 100%!important; min-width: 0!important; max-width: none!important; height: auto!important; min-height: 0!important;
padding: 0!important; margin: 0 0 15px!important; border: 0!important; background: transparent!important;
box-shadow: none!important; backdrop-filter: none!important; -webkit-backdrop-filter: none!important;
}
[data-component="MinimalMessage"][data-component="MinimalMessage"] > [class*="_bubble_"] > [class*="_header_"] {
position: relative!important; display: flex!important; justify-content: center!important;
width: 100%!important; min-width: 0!important; max-width: none!important; height: auto!important; min-height: 0!important;
padding: 0!important; margin: 0 0 15px!important; border: 0!important; background: transparent!important;
box-shadow: none!important; backdrop-filter: none!important; -webkit-backdrop-filter: none!important;
}
[data-zr-native] [data-component="MinimalMessage"] > [class*="_bubble_"] > [class*="_header_"] > [class*="_name_"] { display: none!important; }
[data-zr-native] [class*="_metaPill_"] { position: static!important; transform: none!important; margin: 0!important; color: #c6dce3!important; background: #15344380!important; }
[data-component="MinimalMessage"] [class*="_metaPill_"] { position: static!important; transform: none!important; margin: 0!important; color: #c6dce3!important; background: #15344380!important; }
/* Prose selectors expand during packaging to exclude HTML islands and regex cards. */
[data-component="MessageContent"] :is(p,h1,h2,h3,h4,h5,h6):where(:not(:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose),:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose) *)) { text-align: center!important; }
[data-component="MessageContent"] p:where(:not(:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose),:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose) *)) { max-width: 68ch; margin: 0 auto 1.25em!important; line-height: 1.9!important; overflow-wrap: anywhere; }
[data-component="MessageContent"] :is(em,i,[class*="_proseItalic_"]):where(:not(:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose),:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose) *)) { color: #c3e0f6!important; font-style: italic!important; text-decoration: underline dotted #a7d8e470; text-underline-offset: .25em; background: linear-gradient(transparent 80%,#a9dcff0d 80%); }
[data-component="MessageContent"] :is(strong,b,[class*="_proseBold_"]):where(:not(:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose),:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose) *)) { color: #e0ffea!important; font-weight: 750!important; text-shadow: 0 0 13px #b8f9cd45; background: linear-gradient(transparent 72%,#b7f7d51c 72%); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
[data-component="MessageContent"] :is(q,[class*="_proseDialogue_"]):where(:not(:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose),:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose) *)) {
color: #dcfff4!important; background: linear-gradient(120deg,#9cdcc51f,#a3cae81a)!important;
border: 1px solid #c2f4dd3b; border-radius: 10px 10px 10px 3px; padding: .15em .4em;
box-decoration-break: clone; -webkit-box-decoration-break: clone; line-height: 1.95; text-shadow: 0 1px 7px #0c263952;
}
[data-component="MessageContent"] blockquote:where(:not(:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose),:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose) *)) { position: relative; width: fit-content; max-width: min(62ch,100%); box-sizing: border-box; margin: 26px auto!important; padding: 26px 24px 18px!important; text-align: center!important; border: 1px solid #d0efe836!important; border-left: 2px solid #bbebd8!important; border-radius: 18px 18px 18px 5px!important; background: linear-gradient(135deg,#badfda16,#19374440)!important; color: #d0e9ed!important; box-shadow: inset 0 1px #ffffff13; }
[data-component="MessageContent"] blockquote:where(:not(:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose),:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose) *))::before { content: '↳ VOICEMAIL / A LITTLE ECHO'; position: absolute; top: 8px; left: 20px; color: #a9d0cf; font: 8px/1.3 Consolas,monospace; letter-spacing: .12em; }
[data-component="MessageContent"] blockquote p:last-child:where(:not(:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose),:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose) *)) { margin-bottom: 0!important; }
[data-component="MessageContent"] hr:where(:not(:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose),:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose) *)) { height: 15px!important; max-width: 460px; margin: 32px auto!important; border: 0!important; background: radial-gradient(circle at 50% 50%,#d5f7ed 0 2px,transparent 3px),radial-gradient(circle at 46% 50%,#bbdce599 0 1px,transparent 2px),radial-gradient(circle at 54% 50%,#bbdce599 0 1px,transparent 2px),linear-gradient(90deg,transparent,#a9e4cf80,transparent) center/100% 1px no-repeat!important; filter: drop-shadow(0 0 5px #b8eee840); }
[data-component="MessageContent"] :is(pre,code,table,ul,ol):where(:not(:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose),:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose) *)) { text-align: start!important; }
/* Motion uses native generation state; no artificial progress or timers. */
[data-zr-last="true"] [data-zr-native] { animation: zr-arrive .48s cubic-bezier(.2,.7,.2,1) both; }
[data-zr-last="true"] [data-component="MinimalMessage"] { animation: zr-arrive .48s cubic-bezier(.2,.7,.2,1) both; }
[data-zr-last="false"] [data-zr-native] { animation: zr-arrive .28s ease-out both; }
[data-zr-last="false"] [data-component="MinimalMessage"] { animation: zr-arrive .28s ease-out both; }
[data-zr-streaming="true"] [data-zr-camera] { animation: zr-receive 2.8s ease-in-out infinite; }
[data-component="MinimalMessage"][data-part="streaming"] [data-zr-camera] { animation: zr-receive 2.8s ease-in-out infinite; }
[data-zr-streaming="true"] [data-zr-signal] { animation: zr-signal 1.2s ease-in-out infinite alternate; }
[data-component="MinimalMessage"][data-part="streaming"] [data-zr-signal] { animation: zr-signal 1.2s ease-in-out infinite alternate; }
[data-zr-streaming="true"] [data-component="MessageContent"] { border-color: #b7e6d957!important; }
[data-component="MinimalMessage"][data-part="streaming"] [data-component="MessageContent"] { border-color: #b7e6d957!important; }
[data-zr-streaming="true"] [data-component="MessageContent"] > [class*="_prose_"]::after { content: ' • • •'; display: block; text-align: center; color: #baf2dc; letter-spacing: .4em; animation: zr-signal 1.2s ease-in-out infinite alternate; }
[data-component="MinimalMessage"][data-part="streaming"] [data-component="MessageContent"] > [class*="_prose_"]::after { content: ' • • •'; display: block; text-align: center; color: #baf2dc; letter-spacing: .4em; animation: zr-signal 1.2s ease-in-out infinite alternate; }
[data-component="InputArea"] [class*="_sendBtn_"] { border: 1px solid #ccf7e966!important; background: linear-gradient(145deg,#a5dfcc,#63aaa9)!important; color: #102c37!important; box-shadow: inset 0 1px #ffffff70,0 5px 20px #0e5d6c33!important; transition: transform .15s ease,box-shadow .2s ease!important; }
[data-component="InputArea"] [class*="_sendBtn_"]:hover:not(:disabled) { transform: translateY(-2px)!important; box-shadow: 0 0 0 5px #b5ebd414,0 6px 24px #9ce7d440!important; }
[data-component="InputArea"] [class*="_sendBtn_"]:active:not(:disabled) { transform: scale(.88)!important; box-shadow: 0 0 0 9px #b5ebd425!important; }
[data-component="InputArea"] [class*="_sendBtnStop_"] { background: linear-gradient(145deg,#ecc0cb,#b17891)!important; color: #392235!important; animation: zr-working 2.4s ease-in-out infinite!important; }
[data-component="InputArea"]:has([class*="_sendBtnStop_"]) [class*="_inputRow_"] { background-image: linear-gradient(105deg,transparent 20%,#b9e9df18 48%,transparent 75%)!important; background-size: 240% 100%!important; animation: zr-rainlight 3s ease-in-out infinite; }
[data-component="SwipeControls"] button { transition: transform .16s ease,background .16s ease!important; }
[data-component="SwipeControls"] button:active:not(:disabled) { transform: scale(.8)!important; }
[data-component="SwipeControls"]:has(button:active) { box-shadow: 0 0 0 6px #bdebd217!important; }
[data-zr-call]:has([data-component="SwipeControls"] button:active) [data-zr-camera] { filter: brightness(1.12); }
[data-component="MinimalMessage"]:has([data-component="SwipeControls"] button:active) [data-zr-camera] { filter: brightness(1.12); }
[data-component="LandingPageHeader"] [class*="_logoIcon_"]:hover { transform: rotate(-6deg); transition: transform .3s ease; }
/* Native ManageChatsModal, identified by its documented extension mount. */
[class*="_modal_"]:has([data-spindle-mount="manage_chats_actions"]) { background: radial-gradient(ellipse at 0 0,#82c7c52b,transparent 60%),linear-gradient(145deg,#19313ee8,#0c1d2bf2)!important; border: 1px solid #b5e8de50!important; border-radius: 26px!important; backdrop-filter: blur(26px)!important; color: #e0f2ef!important; box-shadow: 0 25px 90px #06132299!important; }
[class*="_modal_"]:has([data-spindle-mount="manage_chats_actions"]) [class*="_header_"] { border-bottom: 1px solid #b9e9de24!important; padding: 24px 24px 18px!important; }
[class*="_modal_"]:has([data-spindle-mount="manage_chats_actions"]) [class*="_title_"]::before { content: '☏ MISSED CALLS'; display: block; color: #f3c2cc; font-size: 21px; letter-spacing: .08em; margin-bottom: 5px; }
[class*="_modal_"]:has([data-spindle-mount="manage_chats_actions"]) [class*="_title_"] { color: #a3c9d0!important; font-size: 10px!important; letter-spacing: .1em; }
[class*="_modal_"]:has([data-spindle-mount="manage_chats_actions"]) [class*="_subtitle_"] { color: #d4e5e5!important; }
[class*="_modal_"]:has([data-spindle-mount="manage_chats_actions"]) [class*="_toolbar_"] { flex-wrap: wrap!important; background: #d2ede407!important; border-color: #c7eee125!important; }
[class*="_modal_"]:has([data-spindle-mount="manage_chats_actions"]) :is([class*="_searchInput_"],[class*="_editInput_"]) { min-width: 0!important; color: #e4f4ef!important; background: #071d2d66!important; border: 1px solid #bededc38!important; border-radius: 10px!important; padding: 9px 12px!important; }
[class*="_modal_"]:has([data-spindle-mount="manage_chats_actions"]) input::placeholder { color: #b2cbd2!important; }
[class*="_modal_"]:has([data-spindle-mount="manage_chats_actions"]) [class*="_card_"] { position: relative; padding: 18px 14px!important; margin: 10px 0!important; border: 1px solid #e2adb52e!important; border-radius: 17px!important; background: linear-gradient(125deg,#e4a5b610,#aedddb0a)!important; box-shadow: inset 0 1px #ffffff0b!important; transition: border-color .2s ease,background .2s ease; }
[class*="_modal_"]:has([data-spindle-mount="manage_chats_actions"]) [class*="_card_"]:hover { border-color: #e4b8c26b!important; background-color: #d6eff00b!important; }
[class*="_modal_"]:has([data-spindle-mount="manage_chats_actions"]) [class*="_cardInfo_"] { min-width: 0!important; }
[class*="_modal_"]:has([data-spindle-mount="manage_chats_actions"]) [class*="_cardInfo_"]::before { content: '↙ MISSED STORY CALL'; display: block; font: 8px/1.6 Consolas,monospace; letter-spacing: .11em; color: #edb2c0; margin-bottom: 5px; }
[class*="_modal_"]:has([data-spindle-mount="manage_chats_actions"]) [class*="_cardActive_"] { border-color: #a7e1c960!important; background: #9ee0c315!important; }
[class*="_modal_"]:has([data-spindle-mount="manage_chats_actions"]) [class*="_cardActive_"] [class*="_cardInfo_"]::before { content: '↗ CURRENT STORY CALL'; color: #b5ecd2; }
[class*="_modal_"]:has([data-spindle-mount="manage_chats_actions"]) [class*="_cardName_"] { color: #edfaf5!important; font-weight: 700!important; }
[class*="_modal_"]:has([data-spindle-mount="manage_chats_actions"]) [class*="_cardPreview_"] { display: -webkit-box!important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal!important; color: #c0d9e1!important; line-height: 1.6!important; margin: 6px 0!important; }
[class*="_modal_"]:has([data-spindle-mount="manage_chats_actions"]) [class*="_cardMeta_"] { color: #a9c5cd!important; flex-wrap: wrap!important; }
[class*="_modal_"]:has([data-spindle-mount="manage_chats_actions"]) [class*="_cardActions_"] { opacity: 1!important; flex-wrap: wrap; }
[class*="_modal_"]:has([data-spindle-mount="manage_chats_actions"]) [class*="_actionBtnPrimary_"] { color: #bcefd6!important; background: #95d7b91a!important; border: 1px solid #b9ebd340!important; border-radius: 50%!important; }
[class*="_modal_"]:has([data-spindle-mount="manage_chats_actions"]) [class*="_actionBtnPrimary_"]:hover { background: #95d7b93a!important; box-shadow: 0 0 0 4px #bcebd514; }
[class*="_modal_"]:has([data-spindle-mount="manage_chats_actions"]) [class*="_cardIcon_"] { color: #dfa8b8!important; }
[class*="_modal_"]:has([data-spindle-mount="manage_chats_actions"]) [class*="_activeBadge_"] { color: #bcefd6!important; background: #95d7b91a!important; }
[class*="_modal_"]:has([data-spindle-mount="manage_chats_actions"]) [class*="_cardSelected_"] { outline: 2px solid #c4eddf!important; outline-offset: -2px; }
@keyframes zr-arrive { from { opacity: .35; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@keyframes zr-receive { 50% { border-color: #d7fff0; box-shadow: 0 16px 40px #061b2559,0 0 0 6px #b1efcf12,0 0 25px #b1efcf2e; } }
@keyframes zr-signal { from { opacity: .45; } to { opacity: 1; } }
@keyframes zr-working { 50% { box-shadow: 0 0 0 5px #ebb6ca1c,0 0 20px #ebb6ca30; } }
@keyframes zr-rainlight { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (max-width: 600px) {
[data-zr-camera] { width: min(280px,100%); }
[data-zr-call] { margin-block: 20px; }
[data-component="MinimalMessage"] { margin-block: 20px; }
[data-zr-line] { font-size: 8px; gap: 8px; }
[class*="_modal_"]:has([data-spindle-mount="manage_chats_actions"]) [class*="_card_"] { flex-wrap: wrap!important; }
[class*="_modal_"]:has([data-spindle-mount="manage_chats_actions"]) [class*="_cardActions_"] { margin-left: auto; flex-basis: 100%; justify-content: flex-end; }
}
@media (prefers-reduced-motion: reduce) {
[data-zr-call], [data-zr-call] *, [data-zr-call] *::before, [data-zr-call] *::after,
[data-component="InputArea"] *, [data-component="SwipeControls"] *,
[class*="_modal_"]:has([data-spindle-mount="manage_chats_actions"]) * { animation: none!important; transition: none!important; scroll-behavior: auto!important; }
[data-component="MinimalMessage"], [data-component="MinimalMessage"] *, [data-component="MinimalMessage"] *::before, [data-component="MinimalMessage"] *::after,
[data-component="InputArea"] *, [data-component="SwipeControls"] *,
[class*="_modal_"]:has([data-spindle-mount="manage_chats_actions"]) * { animation: none!important; transition: none!important; scroll-behavior: auto!important; }
}
/* AFTERHOURS / AERO — authored SVG masks, silver sea-glass windows and rain. */
[data-zr-icon] { display: inline-block; flex: 0 0 auto; width: 18px; height: 18px; background-color: currentColor; mask: var(--zr-icon) center / contain no-repeat; -webkit-mask: var(--zr-icon) center / contain no-repeat; }
[data-zr-icon="camera"] { --zr-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%226%22%20width%3D%2212%22%20height%3D%2212%22%20rx%3D%223%22%2F%3E%3Cpath%20d%3D%22m15%2010%206-3v10l-6-3%22%2F%3E%3C%2Fsvg%3E"); }
[data-zr-icon="mic"] { --zr-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%229%22%20y%3D%223%22%20width%3D%226%22%20height%3D%2212%22%20rx%3D%223%22%2F%3E%3Cpath%20d%3D%22M6%2010v2a6%206%200%200%200%2012%200v-2M12%2018v3M9%2021h6%22%2F%3E%3C%2Fsvg%3E"); }
[data-zr-icon="hangup"] { --zr-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2014c4-6%2014-6%2018%200l-2%204-5-2v-3h-4v3l-5%202-2-4Z%22%2F%3E%3C%2Fsvg%3E"); }
[data-zr-icon="signal"] { --zr-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2019v-3M9%2019v-6M14%2019V9M19%2019V5%22%2F%3E%3C%2Fsvg%3E"); }
[data-zr-icon="minimize"] { --zr-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2017h14%22%2F%3E%3C%2Fsvg%3E"); }
[data-zr-icon="maximize"] { --zr-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%225%22%20y%3D%225%22%20width%3D%2214%22%20height%3D%2214%22%20rx%3D%222%22%2F%3E%3C%2Fsvg%3E"); }
[data-zr-icon="close"] { --zr-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%206%2012%2012M18%206%206%2018%22%2F%3E%3C%2Fsvg%3E"); }
[data-zr-icon="drop"] { --zr-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203c-2%204-6%207-6%2011a6%206%200%200%200%2012%200c0-4-4-7-6-11Z%22%2F%3E%3Cpath%20d%3D%22M9%2014c0%202%201%203%203%203%22%2F%3E%3C%2Fsvg%3E"); }
[data-zr-camera] {
width: min(400px,100%); aspect-ratio: auto; padding: 40px 7px 7px; border-radius: 20px;
border: 1px solid #e0fff1b3;
background: linear-gradient(125deg,#edfff069,transparent 36%),linear-gradient(180deg,#b1d5d176 0,#75a5ae4d 37px,#214150b8 38px,#6d9ca45c 100%);
box-shadow: inset 0 1px 0 #ffffffc2,inset 1px 0 0 #e1fff482,inset -1px -2px 2px #e0ffef73,0 0 0 5px #b8e5e00a,0 18px 45px #04152466,0 0 30px #b4f3d314;
backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3);
}
[data-zr-call="local"] [data-zr-camera] { border-color: #dcecffb3; background: linear-gradient(125deg,#ebf5ff5c,transparent 36%),linear-gradient(180deg,#b5cbd776,#789dad4d 37px,#24394db8 38px,#789aaa5c 100%); box-shadow: inset 0 1px #ffffffc2,inset 1px 0 #e1f2ff82,inset -1px -2px 2px #d8edff73,0 18px 45px #04152466; }
[data-component="MinimalMessage"][data-part="user"] [data-zr-camera] { border-color: #dcecffb3; background: linear-gradient(125deg,#ebf5ff5c,transparent 36%),linear-gradient(180deg,#b5cbd776,#789dad4d 37px,#24394db8 38px,#789aaa5c 100%); box-shadow: inset 0 1px #ffffffc2,inset 1px 0 #e1f2ff82,inset -1px -2px 2px #d8edff73,0 18px 45px #04152466; }
[data-zr-camera]::after { inset: 0; background: linear-gradient(112deg,transparent 18%,#e3fff312 19%,#ffffff0a 29%,transparent 30%); z-index: 4; border-radius: inherit; }
[data-zr-windowbar] { position: absolute; top: 0; left: 0; right: 0; height: 39px; padding: 0 10px 0 13px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid #ecfff638; box-shadow: 0 1px #0c2a3b4d; }
[data-zr-windowtitle] { min-width: 0; display: flex; align-items: center; gap: 7px; color: #f0fff9; font: 500 10px/1.2 var(--lumiverse-font-family); letter-spacing: .03em; text-shadow: 0 1px 3px #143140; white-space: nowrap; }
[data-zr-windowtitle] [data-zr-icon] { width: 14px; height: 14px; color: #d5f6e9; }
[data-zr-windowcontrols] { display: flex; align-items: center; gap: 3px; color: #edfff9; }
[data-zr-windowcontrols] [data-zr-icon] { width: 16px; height: 16px; margin: 0 3px; }
[data-zr-windowcontrols] [data-zr-icon="close"] { color: #ffd2dc; }
[data-zr-video] { position: relative; width: 100%; aspect-ratio: 16/10; border-radius: 10px 10px 14px 14px; overflow: hidden; background: #173543; border: 1px solid #09232b99; box-shadow: 0 1px 0 #e5fff280,inset 0 0 0 1px #0008; }
[data-zr-video]::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg,#08212ee8,transparent 55%),linear-gradient(125deg,#eafff51c,transparent 42%); }
[data-zr-camera] img { display: block; }
[data-zr-video] [data-zr-initial] { position: absolute; inset: 0; }
[data-zr-camera] figcaption { bottom: 48px; }
[data-zr-camera-tools] { display: flex; align-items: center; gap: 0; padding: 4px; bottom: 10px; border-color: #e2fff266; background: linear-gradient(#d5f3ed38,#365b6b63 48%,#13344585 51%,#8dc9c436); box-shadow: inset 0 1px #ffffff80,inset 0 -1px #c2e9e866,0 3px 10px #041e3055; backdrop-filter: blur(14px); }
[data-zr-camera-tools] [data-zr-icon] { width: 17px; height: 17px; margin: 3px 10px; color: #e6fff4; }
[data-zr-camera-tools] [data-zr-icon="hangup"] { color: #f4bcc9; }
[data-zr-line] > [data-zr-icon] { width: 11px; height: 14px; opacity: .8; }
[data-zr-signal] [data-zr-icon] { width: 22px; height: 18px; }
/* Bubble glass: separate static light/refraction from the moving rain plane.
Both layers stay behind content and ignore all pointer interactions. */
[data-zr-native] [data-component="MinimalMessage"] [data-component="MessageContent"] { position: relative!important; isolation: isolate!important; border-radius: 28px!important; }
[data-component="MinimalMessage"][data-component="MinimalMessage"] [data-component="MessageContent"] { position: relative!important; isolation: isolate!important; border-radius: 28px!important; }
[data-zr-native] [data-component="MinimalMessage"] [data-component="MessageContent"]::before {
border-radius: inherit!important; border: 1px solid #d4f8ed59!important;
background:
radial-gradient(ellipse 75% 22% at 20% 0%,#e2fff135,transparent 85%),
radial-gradient(ellipse 55% 16% at 93% 100%,#a9e9e82b,transparent 90%),
linear-gradient(112deg,transparent 13%,#e4fff00b 14%,#f0ffff0e 26%,transparent 27%),
linear-gradient(180deg,#89bcb824,#183c4b5c 22%,#102b3c73 72%,#84b6ba26)!important;
backdrop-filter: blur(24px) saturate(1.25)!important; -webkit-backdrop-filter: blur(24px) saturate(1.25)!important;
box-shadow: inset 0 2px 1px #f0fff87a,inset 2px 0 2px #d7fff23d,inset -1px -2px 2px #c5fff252,inset 0 0 22px #b7eae812,0 12px 35px #051b3047,0 0 0 5px #bceee605!important;
}
[data-component="MinimalMessage"][data-component="MinimalMessage"] [data-component="MessageContent"]::before {
border-radius: inherit!important; border: 1px solid #d4f8ed59!important;
background:
radial-gradient(ellipse 75% 22% at 20% 0%,#e2fff135,transparent 85%),
radial-gradient(ellipse 55% 16% at 93% 100%,#a9e9e82b,transparent 90%),
linear-gradient(112deg,transparent 13%,#e4fff00b 14%,#f0ffff0e 26%,transparent 27%),
linear-gradient(180deg,#89bcb824,#183c4b5c 22%,#102b3c73 72%,#84b6ba26)!important;
backdrop-filter: blur(24px) saturate(1.25)!important; -webkit-backdrop-filter: blur(24px) saturate(1.25)!important;
box-shadow: inset 0 2px 1px #f0fff87a,inset 2px 0 2px #d7fff23d,inset -1px -2px 2px #c5fff252,inset 0 0 22px #b7eae812,0 12px 35px #051b3047,0 0 0 5px #bceee605!important;
}
[data-zr-native] [data-component="MessageContent"]::after {
content: ''; position: absolute; z-index: -1; inset: 1px; border-radius: inherit; pointer-events: none;
background-image:
radial-gradient(ellipse 1px 18px at 22px 26px,#c9fff02b,transparent 90%),
radial-gradient(ellipse .8px 11px at 61px 39px,#e5ffff24,transparent 90%),
radial-gradient(ellipse 1.2px 24px at 90px 73px,#b9e6f31f,transparent 90%);
background-size: 113px 173px,157px 229px,211px 293px;
background-position: 0 0,31px -80px,70px -160px;
animation: zr-body-rain 9s linear infinite;
opacity: .72;
mask-image: linear-gradient(transparent,#000 8%,#000 92%,transparent);
-webkit-mask-image: linear-gradient(transparent,#000 8%,#000 92%,transparent);
}
[data-component="MinimalMessage"] [data-component="MessageContent"]::after {
content: ''; position: absolute; z-index: -1; inset: 1px; border-radius: inherit; pointer-events: none;
background-image:
radial-gradient(ellipse 1px 18px at 22px 26px,#c9fff02b,transparent 90%),
radial-gradient(ellipse .8px 11px at 61px 39px,#e5ffff24,transparent 90%),
radial-gradient(ellipse 1.2px 24px at 90px 73px,#b9e6f31f,transparent 90%);
background-size: 113px 173px,157px 229px,211px 293px;
background-position: 0 0,31px -80px,70px -160px;
animation: zr-body-rain 9s linear infinite;
opacity: .72;
mask-image: linear-gradient(transparent,#000 8%,#000 92%,transparent);
-webkit-mask-image: linear-gradient(transparent,#000 8%,#000 92%,transparent);
}
@keyframes zr-body-rain { to { background-position: -6px 173px,25px 149px,64px 133px; } }
/* Gentle glass polish on the existing frosted reasoning surfaces. */
[data-zr-native] [data-reasoning-toggle="true"] { border-color: #d9fbed66!important; box-shadow: inset 0 1px #eefff787,inset 0 -1px #c5e4eb38,0 4px 12px #0a233626!important; background: linear-gradient(180deg,#b5ddd13b,#5f8f9e24 45%,#2a526636 52%,#82b9be2e)!important; }
[data-component="MinimalMessage"] [data-reasoning-toggle="true"] { border-color: #d9fbed66!important; box-shadow: inset 0 1px #eefff787,inset 0 -1px #c5e4eb38,0 4px 12px #0a233626!important; background: linear-gradient(180deg,#b5ddd13b,#5f8f9e24 45%,#2a526636 52%,#82b9be2e)!important; }
[data-zr-native] [class*="_bodyWrapper_"] [class*="_body_"] { box-shadow: inset 0 1px #ecfff466,inset 1px 0 #d5eee72b,inset 0 -1px #c5e5e73b!important; }
[data-component="MinimalMessage"] [class*="_bodyWrapper_"] [class*="_body_"] { box-shadow: inset 0 1px #ecfff466,inset 1px 0 #d5eee72b,inset 0 -1px #c5e5e73b!important; }
@media(max-width:600px) {
[data-zr-camera] { width: min(340px,100%); padding-top: 36px; }
[data-zr-windowbar] { height: 35px; padding-inline: 9px; gap: 4px; }
[data-zr-windowtitle] { font-size: 9px; gap: 5px; }
[data-zr-windowcontrols] { gap: 0; }
[data-zr-windowcontrols] [data-zr-icon] { width: 13px; height: 13px; margin: 0 2px; }
}
@media(prefers-reduced-motion:reduce) {
[data-zr-native] [data-component="MessageContent"]::after { animation: none!important; opacity: .22; }
[data-component="MinimalMessage"] [data-component="MessageContent"]::after { animation: none!important; opacity: .22; }
}
:root { --zr-drop-art: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203c-2%204-6%207-6%2011a6%206%200%200%200%2012%200c0-4-4-7-6-11Z%22%2F%3E%3Cpath%20d%3D%22M9%2014c0%202%201%203%203%203%22%2F%3E%3C%2Fsvg%3E"); }
/* AFTERHOURS v10 / a continuous glass surface from home to the writing desk.
Only surfaces change: native gallery geometry and composer layout remain. */
:root {
--zr-glass-face: radial-gradient(ellipse 85% 25% at 12% 0%,#dcfff02e,transparent 86%),linear-gradient(115deg,transparent 14%,#ecfff00b 15%,#ecfff00b 27%,transparent 28%),linear-gradient(180deg,#6e9fa859,#16394bbf 55%,#3e728572);
--zr-glass-edge: inset 0 2px 1px #f0fff878,inset 1px 0 1px #d4f9e84d,inset -1px -2px 2px #c5f5ee59,0 12px 30px #061f3238;
}
/* The quiet writing well has no rain or reflections crossing typed text. */
[data-component="InputArea"] {
background: var(--zr-glass-face)!important;
border: 1px solid #c8eee35c!important; border-radius: 26px!important;
box-shadow: var(--zr-glass-edge)!important;
backdrop-filter: blur(24px) saturate(1.15)!important; -webkit-backdrop-filter: blur(24px) saturate(1.15)!important;
padding: 12px 14px 14px!important;
}
[data-component="InputArea"] [class*="_inputRow_"] {
background: linear-gradient(180deg,#b3d9d323,#2f5c7052)!important;
border: 1px solid #d6f4e64f!important; border-radius: 20px!important;
padding: 6px!important; box-shadow: inset 0 1px #ffffff59,0 5px 14px #0b233028!important;
backdrop-filter: none!important; -webkit-backdrop-filter: none!important;
}
[data-component="InputArea"] [class*="_inputWrapper_"] {
background: #284b5deb!important; border: 1px solid #c5e8df2e!important;
border-radius: 14px!important; min-width: 0!important;
box-shadow: inset 0 2px 6px #061a2929,inset 0 -1px #d0eee31a!important;
}
[data-component="InputArea"] [class*="_inputWrapper_"]:focus-within {
border-color: #c3eedd8c!important; box-shadow: inset 0 2px 6px #061a2929,0 0 0 2px #c3eedd17!important;
}
[data-component="InputArea"] textarea[name="chat-message"] {
background: transparent!important; border: 0!important; box-shadow: none!important;
color: #eef9f4!important; -webkit-text-fill-color: #eef9f4!important; caret-color: #d1ffe5!important;
}
/* Keep mirror metrics identical to the textarea to avoid caret drift. */
[data-component="InputArea"] :is(textarea[name="chat-message"],[class*="_textareaMirror_"]) {
font-size: calc(14px * var(--lumiverse-font-scale,1))!important; line-height: 1.5!important;
padding: 9px 14px!important; letter-spacing: normal!important; border: 0!important;
}
[data-component="InputArea"] textarea[name="chat-message"]::placeholder { color: #c1d7dd!important; -webkit-text-fill-color: #c1d7dd!important; opacity: 1; }
[data-component="InputArea"] textarea[name="chat-message"]::selection { background: #aadbc95c; }
[data-component="InputArea"] :is([class*="_actionBar_"],#ri-toolbar,[class*="_nativeDockActions_"]) {
background: linear-gradient(180deg,#c4e5df29,#20495d7d)!important;
border: 1px solid #d6f4e633!important; box-shadow: inset 0 1px #effff34d!important;
border-radius: 16px!important;
}
[data-component="InputArea"] :is([class*="_attachBtn_"],[class*="_actionBtn_"],[class*="_toolbarBtn_"],.ri-icon-btn) {
color: #d3eae7!important; border-radius: 10px!important;
}
[data-component="InputArea"] :is([class*="_attachBtn_"],[class*="_actionBtn_"],[class*="_toolbarBtn_"],.ri-icon-btn):hover:not(:disabled) { background: #c0f2dc20!important; color: #effff7!important; }
[data-component="InputArea"] [class*="_sttBtnActive_"] { background: #ab5366!important; color: #fff4f6!important; }
[data-component="InputArea"] [class*="_sendBtn_"] { box-shadow: inset 0 2px 1px #ffffff94,inset 0 -2px 2px #2d6d7138,0 4px 14px #062c3d40!important; }
[data-component="InputArea"] button:focus-visible { outline: 2px solid #d1f6e7!important; outline-offset: 2px; }
/* Resume Chat is ChatPickerModal, not ManageChatsModal. Its pair of creation
cards identifies it even when empty, before any saved chat has loaded. */
[class*="_modal_"]:has([class*="_newChatCard_"]):has([class*="_freshChatCard_"]) {
background: radial-gradient(ellipse at 8% 0,#b4e8d92e,transparent 55%),linear-gradient(145deg,#305567f2,#142e42f5)!important;
border: 1px solid #d0f5e373!important; border-radius: 28px!important;
box-shadow: var(--zr-glass-edge),0 25px 70px #05152580!important;
backdrop-filter: blur(24px)!important; -webkit-backdrop-filter: blur(24px)!important;
}
[class*="_modal_"]:has([class*="_newChatCard_"]):has([class*="_freshChatCard_"]) [class*="_header_"] { background: linear-gradient(180deg,#d4efdd20,transparent)!important; border-bottom: 1px solid #c8ebde30!important; }
[class*="_modal_"]:has([class*="_newChatCard_"]):has([class*="_freshChatCard_"]) [class*="_title_"] { color: #d2e8e6!important; font-size: 12px!important; line-height: 1.5!important; }
[class*="_modal_"]:has([class*="_newChatCard_"]):has([class*="_freshChatCard_"]) [class*="_title_"]::before { content: 'Missed calls'; display: block; margin-bottom: 7px; color: #f2fff7; font: 650 clamp(24px,4vw,32px)/1.1 var(--lumiverse-font-family); letter-spacing: -.025em; text-shadow: 0 2px 12px #09253980; }
[class*="_modal_"]:has([class*="_newChatCard_"]):has([class*="_freshChatCard_"]) [class*="_count_"] { color: #d4ede5!important; background: #b4dcd61a!important; border: 1px solid #c8e7df24!important; }
[class*="_modal_"]:has([class*="_newChatCard_"]):has([class*="_freshChatCard_"]) [class*="_list_"] { gap: 12px!important; }
[class*="_modal_"]:has([class*="_newChatCard_"]):has([class*="_freshChatCard_"]) [class*="_card_"] {
background: linear-gradient(135deg,#d7eee719,#618d9c13 40%,#1a3c509c)!important;
border: 1px solid #c4e4de3b!important; border-radius: 18px!important;
box-shadow: inset 0 1px #e4fff14d,inset 0 -1px #b4dcd333!important;
}
[class*="_modal_"]:has([class*="_newChatCard_"]):has([class*="_freshChatCard_"]) [class*="_card_"]:not(:is([class*="_newChatCard_"],[class*="_freshChatCard_"])) { padding-top: 32px!important; }
[class*="_modal_"]:has([class*="_newChatCard_"]):has([class*="_freshChatCard_"]) [class*="_card_"]:not(:is([class*="_newChatCard_"],[class*="_freshChatCard_"]))::after { content: 'MISSED STORY CALL'; position: absolute; top: 12px; left: 18px; color: #edbac9; font: 8px/1.2 Consolas,monospace; letter-spacing: .14em; pointer-events: none; }
[class*="_modal_"]:has([class*="_newChatCard_"]):has([class*="_freshChatCard_"]) [class*="_cardActive_"]::after { content: 'LATEST STORY CALL'!important; color: #baebd5!important; }
[class*="_modal_"]:has([class*="_newChatCard_"]):has([class*="_freshChatCard_"]) [class*="_card_"]::before { background: #c597ac73!important; width: 2px!important; }
[class*="_modal_"]:has([class*="_newChatCard_"]):has([class*="_freshChatCard_"]) [class*="_cardActive_"]::before { background: linear-gradient(#d7ffe5,#74b5ae)!important; }
[class*="_modal_"]:has([class*="_newChatCard_"]):has([class*="_freshChatCard_"]) [class*="_card_"]:hover { border-color: #d4f7e47a!important; box-shadow: inset 0 1px #eefff680,0 5px 15px #09233340!important; }
[class*="_modal_"]:has([class*="_newChatCard_"]):has([class*="_freshChatCard_"]) [class*="_cardLabel_"] { color: #edf8f3!important; }
[class*="_modal_"]:has([class*="_newChatCard_"]):has([class*="_freshChatCard_"]) [class*="_previewText_"] { color: #c2d9e1!important; line-height: 1.6!important; }
[class*="_modal_"]:has([class*="_newChatCard_"]):has([class*="_freshChatCard_"]) :is([class*="_metaRow_"],[class*="_freshChatSubtitle_"]) { color: #b4ced7!important; }
[class*="_modal_"]:has([class*="_newChatCard_"]):has([class*="_freshChatCard_"]) [class*="_metaRow_"] { flex-wrap: wrap!important; gap: 6px 12px!important; }
[class*="_modal_"]:has([class*="_newChatCard_"]):has([class*="_freshChatCard_"]) [class*="_cardTitleRow_"] { flex-wrap: wrap!important; }
[class*="_modal_"]:has([class*="_newChatCard_"]):has([class*="_freshChatCard_"]) [class*="_activeBadge_"] { color: #d0f3de!important; background: #a6d5c124!important; }
[class*="_modal_"]:has([class*="_newChatCard_"]):has([class*="_freshChatCard_"]) [class*="_menuBtn_"] { opacity: 1!important; color: #d5e9ea!important; border: 1px solid #c8e9e02b!important; background: #21475970!important; }
[class*="_modal_"]:has([class*="_newChatCard_"]):has([class*="_freshChatCard_"]) [class*="_deleteAllBtn_"] { color: #ffc0cc!important; background: #7b35452e!important; border-color: #eea8bd40!important; }
[class*="_modal_"]:has([class*="_newChatCard_"]):has([class*="_freshChatCard_"]) :is([class*="_newChatIcon_"],[class*="_freshChatIcon_"]) { color: #d7f7e9!important; background: linear-gradient(#c4eed235,#38677c66)!important; border: 1px solid #cbeede4d!important; box-shadow: inset 0 1px #ffffff66; }
[class*="_modal_"]:has([class*="_newChatCard_"]):has([class*="_freshChatCard_"]) :is([class*="_newChatCard_"],[class*="_freshChatCard_"]) { border-style: solid!important; }
[class*="_modal_"]:has([class*="_newChatCard_"]):has([class*="_freshChatCard_"]) [class*="_newChatCard_"] { background: linear-gradient(120deg,#a2e5c92b,#76afb71a)!important; }
/* Home: reflective glass, native footprint and virtualizer untouched. */
[data-component="LandingPageHeader"] {
background: var(--zr-glass-face)!important; border-color: #d3f6e878!important;
box-shadow: var(--zr-glass-edge),0 0 28px #c1f1df12!important;
}
[data-component="LandingPageHeader"] [class*="_logoText_"]::before { content: 'ZEN RAIN · THE NIGHT LINE'; font-size: 9px; letter-spacing: .19em; color: #c3eadf; }
[data-component="LandingPageHeader"] h1 { color: #b9d9df!important; font-size: 12px!important; line-height: 1.4!important; letter-spacing: .12em!important; font-weight: 500!important; }
[data-component="LandingPageHeader"] h1::before { content: 'Afterhours'; display: block; color: #effff6; font: 750 clamp(32px,3.4vw,49px)/1.05 var(--lumiverse-font-family); letter-spacing: -.045em; margin: 5px 0; text-shadow: 0 2px 12px #102e4266,0 0 22px #bdebd326; }
[data-component="LandingPageHeader"] [class*="_taglineBtn_"] { color: #d9eeea!important; font-size: 11px!important; }
[data-component="LandingPageHeader"] [class*="_logoIcon_"] { background: linear-gradient(135deg,#e4fff14d,#3b70855c 48%,#15405580 50%,#8fc3bc38)!important; border-color: #daf6e685!important; box-shadow: inset 0 2px #ffffff94,inset 0 -2px #c8eee040,0 6px 20px #12324a52!important; }
[data-component="LandingPageHeader"] [class*="_logoIcon_"] > svg { display: none!important; }
[data-component="LandingPageHeader"] [class*="_logoIcon_"]::before { content: ''; width: 27px; height: 34px; background: #dcfff0; mask: var(--zr-drop-art) center/contain no-repeat; -webkit-mask: var(--zr-drop-art) center/contain no-repeat; filter: drop-shadow(0 0 8px #bfeeda66); }
[data-component="LandingPageHeader"] [class*="_accountBtn_"],
[data-component="LandingPageTabs"] :is([class*="_iconButton_"],[class*="_hiddenManagerBtn_"]) { background: linear-gradient(#cce9de26,#21495e8c)!important; color: #e1f3ec!important; border-color: #dbf5e54a!important; box-shadow: inset 0 1px #f4fff46b,inset 0 -1px #bddcd526!important; }
[data-component="LandingPageTabs"] [class*="_searchField_"] { background: linear-gradient(180deg,#b4d9cd2b,#1c4258ad)!important; border-color: #d7f1e573!important; box-shadow: inset 0 2px #eafff36b,inset 0 -1px #c0e9e14d,0 6px 20px #09223b33!important; }
[data-component="LandingPageChats"] [class*="_cardTilt_"] > [class*="_card_"] { background: var(--zr-glass-face)!important; border-color: #d4f5e678!important; box-shadow: var(--zr-glass-edge)!important; }
[data-component="LandingPageChats"] [class*="_cardTilt_"] > [class*="_card_"]::before { background: linear-gradient(#d3f0e32b,#0e3548a6); border-color: #d6f4e64d; color: #e0f6ed; box-shadow: inset 0 1px #ffffff40; }
[data-component="LandingPageChats"] [class*="_cardImage_"] { border-color: #defbeecc!important; box-shadow: 0 0 0 4px #9fd2c726,0 0 0 5px #defff633,0 8px 25px #08253659!important; }
[data-component="LandingPageChats"] [class*="_cardMeta_"] { background: linear-gradient(#e4f5eeeb,#b9d8dce0)!important; border-color: #f1fff7b3!important; box-shadow: inset 0 2px #ffffffa6,inset 0 -1px #6095a23b,0 5px 12px #092a3930!important; }
[data-component="LandingPageChats"] [class*="_cardBtn_"]::before,
[data-component="LandingPageChats"] [class*="_cardBtn_"]::after { box-shadow: inset 0 2px 1px #ffffffab,inset 0 -2px 2px #2349593b,0 6px 14px #092a3945; border-color: #e5fff380; }
@media(max-width:600px) {
[data-component="InputArea"] { padding: 9px 10px 10px!important; border-radius: 22px!important; }
[data-component="InputArea"] :is(textarea[name="chat-message"],[class*="_textareaMirror_"]) { font-size: max(16px,calc(14px * var(--lumiverse-font-scale,1)))!important; padding: 8px 12px!important; }
[class*="_modal_"]:has([class*="_newChatCard_"]):has([class*="_freshChatCard_"]) [class*="_header_"] { padding-left: 18px!important; }
[class*="_modal_"]:has([class*="_newChatCard_"]):has([class*="_freshChatCard_"]) [class*="_list_"] { padding: 16px!important; }
[data-component="LandingPageHeader"] [class*="_logoText_"]::before { font-size: 8px; letter-spacing: .1em; }
}
@media(prefers-reduced-motion:reduce) { [class*="_modal_"]:has([class*="_newChatCard_"]):has([class*="_freshChatCard_"]) *,[class*="_modal_"]:has([class*="_newChatCard_"]):has([class*="_freshChatCard_"]) *::before,[class*="_modal_"]:has([class*="_newChatCard_"]):has([class*="_freshChatCard_"]) *::after { animation: none!important; transition: none!important; } }
/* PAPER SKIES / v10 — sunset-tinted Aero glass. This layer changes paint,
never virtual gallery geometry, native chat actions or composer positioning. */
:root, html[data-theme-mode], body {
color-scheme: light;
--lumiverse-bg: color-mix(in srgb,#f6eee6,#202a40 calc(var(--ps-night)*100%))!important;
--lumiverse-bg-elevated: color-mix(in srgb,#fff7edd9,#2b3651e6 calc(var(--ps-night)*100%))!important;
--lumiverse-bg-hover: color-mix(in srgb,#f7d9c7,#3b4262 calc(var(--ps-night)*100%))!important;
--lumiverse-bg-dark: color-mix(in srgb,#e2d8cc66,#172237a6 calc(var(--ps-night)*100%))!important;
--lumiverse-bg-darker: color-mix(in srgb,#cbd6d866,#131c30bf calc(var(--ps-night)*100%))!important;
--lumiverse-bg-deep: color-mix(in srgb,#e4ecea,#142037 calc(var(--ps-night)*100%))!important;
--lumiverse-bg-040: color-mix(in srgb,#fff6e866,#26355066 calc(var(--ps-night)*100%))!important;
--lumiverse-bg-050: color-mix(in srgb,#fff6e880,#26355080 calc(var(--ps-night)*100%))!important;
--lumiverse-bg-070: color-mix(in srgb,#fff6e8b3,#263550b3 calc(var(--ps-night)*100%))!important;
--lumiverse-bg-elevated-040: color-mix(in srgb,#fff9ef99,#34435a99 calc(var(--ps-night)*100%))!important;
--lumiverse-bg-deep-080: color-mix(in srgb,#f4e9dccc,#172439cc calc(var(--ps-night)*100%))!important;
--lumiverse-text: color-mix(in srgb,#344b56,#e5e9f7 calc(var(--ps-night)*100%))!important;
--lumiverse-text-muted: color-mix(in srgb,#526772,#bac5df calc(var(--ps-night)*100%))!important;
--lumiverse-text-dim: color-mix(in srgb,#5d717b,#aab7d2 calc(var(--ps-night)*100%))!important;
--lumiverse-text-hint: color-mix(in srgb,#62727a,#9ba9c7 calc(var(--ps-night)*100%))!important;
--lumiverse-prose-dialogue: color-mix(in srgb,#754637,#e0d2f7 calc(var(--ps-night)*100%))!important;
--lumiverse-prose-italic: color-mix(in srgb,#346779,#b5d5ed calc(var(--ps-night)*100%))!important;
--lumiverse-prose-bold: color-mix(in srgb,#8e4a32,#e2cbff calc(var(--ps-night)*100%))!important;
--lumiverse-prose-blockquote: color-mix(in srgb,#496571,#c8d5ed calc(var(--ps-night)*100%))!important;
--lumiverse-prose-link: color-mix(in srgb,#3e7184,#c3cbff calc(var(--ps-night)*100%))!important;
--lumiverse-icon: color-mix(in srgb,#385762,#d6dff5 calc(var(--ps-night)*100%))!important;
--lumiverse-icon-muted: color-mix(in srgb,#526772,#b7c5df calc(var(--ps-night)*100%))!important;
--lumiverse-icon-dim: color-mix(in srgb,#62727a,#9eaece calc(var(--ps-night)*100%))!important;
--lumiverse-primary: color-mix(in srgb,#b66643,#b6a6e5 calc(var(--ps-night)*100%))!important;
--lumiverse-primary-hover: color-mix(in srgb,#924a32,#c9baf1 calc(var(--ps-night)*100%))!important;
--lumiverse-primary-text: color-mix(in srgb,#8a4934,#d4c5fa calc(var(--ps-night)*100%))!important;
--lumiverse-primary-contrast: color-mix(in srgb,#fffaf1,#24304b calc(var(--ps-night)*100%))!important;
--lumiverse-primary-light: color-mix(in srgb,#e48b6320,#b4a4e520 calc(var(--ps-night)*100%))!important;
--lumiverse-primary-muted: color-mix(in srgb,#b6664380,#b4a4e580 calc(var(--ps-night)*100%))!important;
--lumiverse-primary-010: color-mix(in srgb,#e48b631a,#b4a4e51a calc(var(--ps-night)*100%))!important;
--lumiverse-primary-015: color-mix(in srgb,#e48b6326,#b4a4e526 calc(var(--ps-night)*100%))!important;
--lumiverse-primary-020: color-mix(in srgb,#e48b6333,#b4a4e533 calc(var(--ps-night)*100%))!important;
--lumiverse-primary-050: color-mix(in srgb,#e48b6380,#b4a4e580 calc(var(--ps-night)*100%))!important;
--lumiverse-primary-deep: color-mix(in srgb,#f7d4b3,#3a3b61 calc(var(--ps-night)*100%))!important;
--lumiverse-primary-deep-hover: color-mix(in srgb,#efc399,#48466f calc(var(--ps-night)*100%))!important;
--lumiverse-primary-deep-contrast: color-mix(in srgb,#653e2d,#e5defb calc(var(--ps-night)*100%))!important;
--lumiverse-fill-subtle: color-mix(in srgb,#6985900b,#c6d5fa0b calc(var(--ps-night)*100%))!important;
--lumiverse-fill: color-mix(in srgb,#69859014,#c6d5fa14 calc(var(--ps-night)*100%))!important;
--lumiverse-fill-hover: color-mix(in srgb,#c4806126,#b4a6e526 calc(var(--ps-night)*100%))!important;
--lumiverse-fill-medium: color-mix(in srgb,#fff7e985,#31405b85 calc(var(--ps-night)*100%))!important;
--lumiverse-fill-strong: color-mix(in srgb,#fff7e9b3,#31405bb3 calc(var(--ps-night)*100%))!important;
--lumiverse-fill-heavy: color-mix(in srgb,#e6e5ded9,#293752d9 calc(var(--ps-night)*100%))!important;
--lumiverse-fill-deepest: color-mix(in srgb,#d7dfddeb,#1b2941eb calc(var(--ps-night)*100%))!important;
--lumiverse-card-bg: color-mix(in srgb,#fff7edb8,#30405ab8 calc(var(--ps-night)*100%))!important;
--lumiverse-card-image-bg: color-mix(in srgb,#d4e8e9,#3b4e6b calc(var(--ps-night)*100%))!important;
--lumiverse-border: color-mix(in srgb,#7b8e8e38,#b2bfe138 calc(var(--ps-night)*100%))!important;
--lumiverse-border-hover: color-mix(in srgb,#a36c4d80,#c2afe680 calc(var(--ps-night)*100%))!important;
--lumiverse-border-light: color-mix(in srgb,#ffffffb3,#d5dcf84d calc(var(--ps-night)*100%))!important;
--lumiverse-modal-backdrop: color-mix(in srgb,#515c6b40,#080f2073 calc(var(--ps-night)*100%))!important;
--lumiverse-gradient-modal: linear-gradient(145deg,color-mix(in srgb,#fffaeff5,#484363f5 calc(var(--ps-night)*100%)),color-mix(in srgb,#e8f2f2f5,#31445ff5 calc(var(--ps-night)*100%)))!important;
--lumiverse-danger: color-mix(in srgb,#b84450,#e6a4bf calc(var(--ps-night)*100%))!important;
--lumiverse-danger-hover: color-mix(in srgb,#993440,#edbed0 calc(var(--ps-night)*100%))!important;
--lumiverse-success: color-mix(in srgb,#377765,#9bcabf calc(var(--ps-night)*100%))!important;
--lumiverse-shadow: 0 8px 24px color-mix(in srgb,#775d4f1c,#07102523 calc(var(--ps-night)*100%))!important;
--lumiverse-shadow-lg: 0 22px 65px color-mix(in srgb,#775d4f2e,#0710253a calc(var(--ps-night)*100%))!important;
--lumiverse-font-title: 'Outfit',sans-serif!important;
--lcs-glass-bg: color-mix(in srgb,#fff8ef8c,#304059b3 calc(var(--ps-night)*100%))!important;
--lcs-glass-bg-hover: color-mix(in srgb,#fff8efbd,#3b4a66cc calc(var(--ps-night)*100%))!important;
--lcs-glass-border: color-mix(in srgb,#ffffffe0,#c9d3f563 calc(var(--ps-night)*100%))!important;
--lcs-glass-border-hover: color-mix(in srgb,#edb88e,#c5b3ed calc(var(--ps-night)*100%))!important;
--zr-ink: color-mix(in srgb,#344b56,#e5e9f7 calc(var(--ps-night)*100%));
--zr-mint: color-mix(in srgb,#38796c,#9bcac7 calc(var(--ps-night)*100%));
--zr-ice: color-mix(in srgb,#346e84,#b5d2ef calc(var(--ps-night)*100%));
--zr-rose: color-mix(in srgb,#a14e58,#ddb0cf calc(var(--ps-night)*100%));
--zr-edge: color-mix(in srgb,#ffffffc9,#c9d3f563 calc(var(--ps-night)*100%));
--zr-glass-face: radial-gradient(ellipse 90% 28% at 12% 0%,color-mix(in srgb,#ffffffa8,#c4d4ff1e calc(var(--ps-night)*100%)),transparent 90%),linear-gradient(117deg,transparent 10%,color-mix(in srgb,#ffffff45,#c4d4ff0c calc(var(--ps-night)*100%)) 11%,color-mix(in srgb,#ffffff17,#c4d4ff04 calc(var(--ps-night)*100%)) 25%,transparent 26%),linear-gradient(160deg,color-mix(in srgb,#fff6e8a8,#484363a8 calc(var(--ps-night)*100%)),color-mix(in srgb,#e7f1f4a3,#31445fa3 calc(var(--ps-night)*100%)) 52%,color-mix(in srgb,#ffd8ba96,#48436396 calc(var(--ps-night)*100%)));
--zr-glass-edge: inset 0 2px 1px color-mix(in srgb,#ffffffed,#c3cdf34c calc(var(--ps-night)*100%)),inset 1px 0 1px color-mix(in srgb,#ffffffc4,#c3cdf33f calc(var(--ps-night)*100%)),inset -1px -2px 2px color-mix(in srgb,#e4c9b68c,#c3cdf32d calc(var(--ps-night)*100%)),0 12px 30px color-mix(in srgb,#775b4a24,#0710252d calc(var(--ps-night)*100%));
}
body { background: color-mix(in srgb,#f7e8db,#484363ff calc(var(--ps-night)*100%)) url('assets/paper-skies-sunset.svg') center/cover fixed no-repeat!important; color: var(--zr-ink)!important; }
/* Replace wallpaper paint, not settings or uploaded files. */
[data-component="ChatView"], [data-component="LandingPage"],
[data-app-root], [data-lumiverse-surface="chat-body"] { background: transparent!important; }
[data-component="ChatView"] > :is([class*="_sceneBackgroundLayer_"],[class*="_sceneTextContextLayer_"],[class*="_wallpaperTransitionLayer_"]) { display: none!important; }
/* Native WallpaperLayer is a direct child of App or ChatView. Scope to those
parents so generated images and videos inside messages are never hidden. */
[data-app-root] > [class*="_layer_"][class*="_fixed_"],
[data-app-root] > video[class*="_videoLayer_"],
[data-component="ChatView"] > :is([class*="_layer_"],video[class*="_videoLayer_"]) { display: none!important; }
/* Two fixed, non-interactive planes: one asset, two independent flight paths.
The entire app is above them. No per-message birds, JS timers or listeners. */
body::before, body::after {
content: ''; position: fixed; inset: auto; top: 12vh; left: -230px;
width: clamp(125px,14vw,225px); height: clamp(85px,9.4vw,150px);
background: url('assets/paper-skies-crane.png') center/contain no-repeat!important;
z-index: 0!important; pointer-events: none!important; opacity: .72;
filter: none!important; animation: zr-crane-flight 62s linear -18s infinite;
will-change: transform; transform-origin: center;
}
body::after { top: 67vh; width: clamp(100px,10vw,160px); height: clamp(67px,6.7vw,107px); opacity: .55; animation-duration: 86s; animation-delay: -61s; }
#root { position: relative; z-index: 1; }
@keyframes zr-crane-flight {
0% { transform: translate3d(-20px,20px,0) rotate(-7deg); }
25% { transform: translate3d(calc(25vw + 65px),-18px,0) rotate(2deg); }
50% { transform: translate3d(calc(50vw + 130px),-45px,0) rotate(-5deg); }
75% { transform: translate3d(calc(75vw + 195px),-15px,0) rotate(1deg); }
100% { transform: translate3d(calc(100vw + 260px),-38px,0) rotate(-7deg); }
}
/* The chrome stays pale; the video retains a dark scrim for portrait labels. */
[data-zr-camera], [data-zr-call="local"] [data-zr-camera] { background: var(--zr-glass-face); border-color: color-mix(in srgb,#ffffffe6,#b7c8e7a1 calc(var(--ps-night)*100%)); box-shadow: var(--zr-glass-edge),0 0 0 5px color-mix(in srgb,#fff8ee26,#c3cdf30c calc(var(--ps-night)*100%)); }
[data-zr-camera], [data-component="MinimalMessage"][data-part="user"] [data-zr-camera] { background: var(--zr-glass-face); border-color: color-mix(in srgb,#ffffffe6,#b7c8e7a1 calc(var(--ps-night)*100%)); box-shadow: var(--zr-glass-edge),0 0 0 5px color-mix(in srgb,#fff8ee26,#c3cdf30c calc(var(--ps-night)*100%)); }
[data-zr-windowbar] { border-color: color-mix(in srgb,#ffffffcc,#b7c8e78f calc(var(--ps-night)*100%)); box-shadow: 0 1px color-mix(in srgb,#8e9e9b26,#07102530 calc(var(--ps-night)*100%)); }
[data-zr-windowtitle], [data-zr-windowcontrols] { color: color-mix(in srgb,#405b67,#e1e8f7ff calc(var(--ps-night)*100%)); text-shadow: none; }
[data-zr-windowtitle] [data-zr-icon] { color: color-mix(in srgb,#a45a39,#dac8f5ff calc(var(--ps-night)*100%)); }
[data-zr-windowcontrols] [data-zr-icon="close"] { color: color-mix(in srgb,#a14e58,#dac8f5ff calc(var(--ps-night)*100%)); }
[data-zr-video] { border-color: color-mix(in srgb,#aec6c7,#b7c8e7a6 calc(var(--ps-night)*100%)); background: color-mix(in srgb,#698e9d,#526d91ff calc(var(--ps-night)*100%)); }
[data-zr-video]::after { background: linear-gradient(0deg,color-mix(in srgb,#263e4ed9,#20314cd9 calc(var(--ps-night)*100%)),transparent 58%),linear-gradient(125deg,color-mix(in srgb,#fff1dc26,#48436326 calc(var(--ps-night)*100%)),transparent 45%); }
[data-zr-camera-tag], [data-zr-call="local"] [data-zr-camera-tag] { color: color-mix(in srgb,#fff8eb,#f1eeffff calc(var(--ps-night)*100%)); border-color: color-mix(in srgb,#fff0da66,#b9a9db47 calc(var(--ps-night)*100%)); background: color-mix(in srgb,#3e586dbd,#20314cbd calc(var(--ps-night)*100%)); }
[data-zr-camera-tag], [data-component="MinimalMessage"][data-part="user"] [data-zr-camera-tag] { color: color-mix(in srgb,#fff8eb,#f1eeffff calc(var(--ps-night)*100%)); border-color: color-mix(in srgb,#fff0da66,#b9a9db47 calc(var(--ps-night)*100%)); background: color-mix(in srgb,#3e586dbd,#20314cbd calc(var(--ps-night)*100%)); }
[data-zr-camera-tag]::before { color: color-mix(in srgb,#ffd5a2,#dac8f5ff calc(var(--ps-night)*100%)); }
[data-zr-signal] { color: color-mix(in srgb,#ffdfa9,#f1eeffff calc(var(--ps-night)*100%)); }
[data-zr-camera-tools] { background: linear-gradient(color-mix(in srgb,#fff4e88c,#4843638c calc(var(--ps-night)*100%)),color-mix(in srgb,#f2d5bd61,#48436361 calc(var(--ps-night)*100%))); border-color: color-mix(in srgb,#fff7ead1,#b9a9db92 calc(var(--ps-night)*100%)); box-shadow: inset 0 1px color-mix(in srgb,#fff,#c3cdf352 calc(var(--ps-night)*100%)),0 3px 12px color-mix(in srgb,#283e5130,#0710253c calc(var(--ps-night)*100%)); }
[data-zr-camera-tools] [data-zr-icon] { color: color-mix(in srgb,#263f4e,#e1e8f7ff calc(var(--ps-night)*100%)); }
[data-zr-camera-tools] [data-zr-icon="hangup"] { color: color-mix(in srgb,#923849,#dac8f5ff calc(var(--ps-night)*100%)); }
[data-zr-line], [data-zr-line] > span:not(:nth-child(2)) { color: color-mix(in srgb,#536b76,#bccbe4ff calc(var(--ps-night)*100%)); }
[data-zr-native] [class*="_metaPill_"] { color: color-mix(in srgb,#4f626d,#e1e8f7ff calc(var(--ps-night)*100%))!important; background: color-mix(in srgb,#fff8eebd,#484363bd calc(var(--ps-night)*100%))!important; border-color: color-mix(in srgb,#ffffffe0,#b7c8e79d calc(var(--ps-night)*100%))!important; text-shadow: none!important; }
[data-component="MinimalMessage"] [class*="_metaPill_"] { color: color-mix(in srgb,#4f626d,#e1e8f7ff calc(var(--ps-night)*100%))!important; background: color-mix(in srgb,#fff8eebd,#484363bd calc(var(--ps-night)*100%))!important; border-color: color-mix(in srgb,#ffffffe0,#b7c8e79d calc(var(--ps-night)*100%))!important; text-shadow: none!important; }
[data-zr-native] [data-component="MinimalMessage"] [data-component="MessageContent"]::before {
background: radial-gradient(ellipse 85% 26% at 14% 0,color-mix(in srgb,#ffffffe0,#c4d4ff28 calc(var(--ps-night)*100%)),transparent 85%),linear-gradient(114deg,transparent 12%,color-mix(in srgb,#ffffff2b,#c4d4ff08 calc(var(--ps-night)*100%)) 13%,color-mix(in srgb,#ffffff40,#c4d4ff0c calc(var(--ps-night)*100%)) 23%,transparent 24%),linear-gradient(155deg,color-mix(in srgb,#fff9eddf,#484363df calc(var(--ps-night)*100%)),color-mix(in srgb,#e8f1f3d9,#31445fd9 calc(var(--ps-night)*100%)) 60%,color-mix(in srgb,#ffe4cfd9,#484363d9 calc(var(--ps-night)*100%)))!important;
border-color: color-mix(in srgb,#fffffff0,#b7c8e7a6 calc(var(--ps-night)*100%))!important; box-shadow: var(--zr-glass-edge),0 0 0 4px color-mix(in srgb,#fff9ed1a,#c3cdf308 calc(var(--ps-night)*100%))!important;
}
[data-component="MinimalMessage"][data-component="MinimalMessage"] [data-component="MessageContent"]::before {
background: radial-gradient(ellipse 85% 26% at 14% 0,color-mix(in srgb,#ffffffe0,#c4d4ff28 calc(var(--ps-night)*100%)),transparent 85%),linear-gradient(114deg,transparent 12%,color-mix(in srgb,#ffffff2b,#c4d4ff08 calc(var(--ps-night)*100%)) 13%,color-mix(in srgb,#ffffff40,#c4d4ff0c calc(var(--ps-night)*100%)) 23%,transparent 24%),linear-gradient(155deg,color-mix(in srgb,#fff9eddf,#484363df calc(var(--ps-night)*100%)),color-mix(in srgb,#e8f1f3d9,#31445fd9 calc(var(--ps-night)*100%)) 60%,color-mix(in srgb,#ffe4cfd9,#484363d9 calc(var(--ps-night)*100%)))!important;
border-color: color-mix(in srgb,#fffffff0,#b7c8e7a6 calc(var(--ps-night)*100%))!important; box-shadow: var(--zr-glass-edge),0 0 0 4px color-mix(in srgb,#fff9ed1a,#c3cdf308 calc(var(--ps-night)*100%))!important;
}
[data-zr-native] [data-component="MessageContent"]::after { opacity: .25; background-image: radial-gradient(ellipse 1px 18px at 22px 26px,color-mix(in srgb,#6d9ca433,#526d9133 calc(var(--ps-night)*100%)),transparent 90%),radial-gradient(ellipse .8px 11px at 61px 39px,color-mix(in srgb,#fff,#c4d4ff2e calc(var(--ps-night)*100%)) 0,transparent 90%),radial-gradient(ellipse 1.2px 24px at 90px 73px,color-mix(in srgb,#c4865a26,#69618b26 calc(var(--ps-night)*100%)),transparent 90%); }
[data-component="MinimalMessage"] [data-component="MessageContent"]::after { opacity: .25; background-image: radial-gradient(ellipse 1px 18px at 22px 26px,color-mix(in srgb,#6d9ca433,#526d9133 calc(var(--ps-night)*100%)),transparent 90%),radial-gradient(ellipse .8px 11px at 61px 39px,color-mix(in srgb,#fff,#c4d4ff2e calc(var(--ps-night)*100%)) 0,transparent 90%),radial-gradient(ellipse 1.2px 24px at 90px 73px,color-mix(in srgb,#c4865a26,#69618b26 calc(var(--ps-night)*100%)),transparent 90%); }
[data-component="MessageContent"] :is(p,h1,h2,h3,h4,h5,h6,li,td,th):where(:not(:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose),:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose) *)) { color: color-mix(in srgb,#344b56,#e1e8f7ff calc(var(--ps-night)*100%))!important; text-shadow: none!important; }
[data-component="MessageContent"] :is(em,i,[class*="_proseItalic_"]):where(:not(:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose),:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose) *)) { color: color-mix(in srgb,#346779,#e1e8f7ff calc(var(--ps-night)*100%))!important; text-decoration-color: color-mix(in srgb,#6e9da780,#b7c8e75a calc(var(--ps-night)*100%))!important; background: linear-gradient(transparent 80%,color-mix(in srgb,#a9dfe52e,#31445f2e calc(var(--ps-night)*100%)) 80%)!important; }
[data-component="MessageContent"] :is(strong,b,[class*="_proseBold_"]):where(:not(:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose),:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose) *)) { color: color-mix(in srgb,#8e4a32,#dac8f5ff calc(var(--ps-night)*100%))!important; text-shadow: none!important; background: linear-gradient(transparent 72%,color-mix(in srgb,#f4b67640,#69618b40 calc(var(--ps-night)*100%)) 72%)!important; }
[data-component="MessageContent"] :is(q,[class*="_proseDialogue_"]):where(:not(:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose),:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose) *)) { color: color-mix(in srgb,#754637,#dac8f5ff calc(var(--ps-night)*100%))!important; background: linear-gradient(120deg,color-mix(in srgb,#ffe3b9a6,#484363a6 calc(var(--ps-night)*100%)),color-mix(in srgb,#ffcdbb80,#48436380 calc(var(--ps-night)*100%)))!important; border-color: color-mix(in srgb,#bf805c33,#b9a9db24 calc(var(--ps-night)*100%))!important; text-shadow: none!important; }
[data-component="MessageContent"] blockquote:where(:not(:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose),:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose) *)) { color: color-mix(in srgb,#496571,#e1e8f7ff calc(var(--ps-night)*100%))!important; background: linear-gradient(135deg,color-mix(in srgb,#daeff0a6,#31445fa6 calc(var(--ps-night)*100%)),color-mix(in srgb,#fff4dc80,#48436380 calc(var(--ps-night)*100%)))!important; border-color: color-mix(in srgb,#fff,#b7c8e7a6 calc(var(--ps-night)*100%))!important; border-left-color: color-mix(in srgb,#cc9872,#b9a9dba6 calc(var(--ps-night)*100%))!important; }
[data-component="MessageContent"] blockquote:where(:not(:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose),:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose) *))::before { color: color-mix(in srgb,#8a5b41,#dac8f5ff calc(var(--ps-night)*100%))!important; }
[data-component="MessageContent"] hr:where(:not(:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose),:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose) *)) { background: radial-gradient(circle at 50% 50%,color-mix(in srgb,#a96a46,#463a5dff calc(var(--ps-night)*100%)) 0 2px,transparent 3px),radial-gradient(circle at 46% 50%,color-mix(in srgb,#6b9fad,#526d91ff calc(var(--ps-night)*100%)) 0 1px,transparent 2px),radial-gradient(circle at 54% 50%,color-mix(in srgb,#6b9fad,#526d91ff calc(var(--ps-night)*100%)) 0 1px,transparent 2px),linear-gradient(90deg,transparent,color-mix(in srgb,#c49c72,#69618bff calc(var(--ps-night)*100%)),transparent) center/100% 1px no-repeat!important; filter: none!important; }
[data-zr-streaming="true"] [data-component="MessageContent"] > [class*="_prose_"]::after { color: color-mix(in srgb,#a36745,#dac8f5ff calc(var(--ps-night)*100%))!important; }
[data-component="MinimalMessage"][data-part="streaming"] [data-component="MessageContent"] > [class*="_prose_"]::after { color: color-mix(in srgb,#a36745,#dac8f5ff calc(var(--ps-night)*100%))!important; }
[data-component="MinimalMessage"] [data-reasoning-toggle="true"],
[data-component="MinimalMessage"] [data-reasoning-toggle="true"] ~ [class*="_bodyWrapper_"] [class*="_body_"] { background: var(--zr-glass-face)!important; color: color-mix(in srgb,#405b67,#e1e8f7ff calc(var(--ps-night)*100%))!important; border-color: color-mix(in srgb,#ffffffd9,#b7c8e798 calc(var(--ps-night)*100%))!important; box-shadow: var(--zr-glass-edge)!important; }
[data-component="SwipeControls"] { background: color-mix(in srgb,#fff6e8e6,#484363e6 calc(var(--ps-night)*100%))!important; color: color-mix(in srgb,#426573,#e1e8f7ff calc(var(--ps-night)*100%))!important; border-color: color-mix(in srgb,#fff,#b7c8e7a6 calc(var(--ps-night)*100%))!important; box-shadow: 0 4px 14px color-mix(in srgb,#7d6b5726,#07102530 calc(var(--ps-night)*100%))!important; }
[data-component="SwipeControls"] :is(button,[class*="_counter_"]) { color: color-mix(in srgb,#426573,#e1e8f7ff calc(var(--ps-night)*100%))!important; background-color: color-mix(in srgb,#b9dce94d,#31445f4d calc(var(--ps-night)*100%))!important; border-color: color-mix(in srgb,#527c7f33,#b7c8e724 calc(var(--ps-night)*100%))!important; }
[data-component="SwipeControls"] button:disabled { color: color-mix(in srgb,#7b8588,#bccbe4ff calc(var(--ps-night)*100%))!important; background: color-mix(in srgb,#e4e0d96b,#31445f6b calc(var(--ps-night)*100%))!important; opacity: .65!important; }
[data-component="SwipeControls"] button:is(:hover,:focus-visible):not(:disabled) { background: color-mix(in srgb,#f8d5ac,#484363ff calc(var(--ps-night)*100%))!important; border-color: color-mix(in srgb,#b57a46,#b9a9dba6 calc(var(--ps-night)*100%))!important; }
[data-component="MinimalMessage"] [class*="_actions_"] { background: color-mix(in srgb,#fff5e6e6,#484363e6 calc(var(--ps-night)*100%))!important; border-color: color-mix(in srgb,#fff,#b7c8e7a6 calc(var(--ps-night)*100%))!important; }
[data-component="MinimalMessage"] [class*="_actions_"] button { color: color-mix(in srgb,#476a77,#e1e8f7ff calc(var(--ps-night)*100%))!important; }
/* A quiet, opaque warm-ivory writing well: no moving layers inside the field. */
[data-component="InputArea"] { border-color: color-mix(in srgb,#ffffffe6,#b7c8e7a1 calc(var(--ps-night)*100%))!important; }
[data-component="InputArea"] [class*="_inputRow_"] { background: linear-gradient(color-mix(in srgb,#fffffc8c,#c4d4ff19 calc(var(--ps-night)*100%)),color-mix(in srgb,#e4eef07a,#31445f7a calc(var(--ps-night)*100%)))!important; border-color: color-mix(in srgb,#ffffffed,#b7c8e7a6 calc(var(--ps-night)*100%))!important; box-shadow: inset 0 1px color-mix(in srgb,#fff,#c3cdf352 calc(var(--ps-night)*100%)),0 5px 14px color-mix(in srgb,#7e624b17,#0710251d calc(var(--ps-night)*100%))!important; }
[data-component="InputArea"] [class*="_inputWrapper_"] { background: color-mix(in srgb,#fff7ec,#484363ff calc(var(--ps-night)*100%))!important; border-color: color-mix(in srgb,#a8b7b64d,#b7c8e736 calc(var(--ps-night)*100%))!important; box-shadow: inset 0 2px 6px color-mix(in srgb,#8b6b4612,#07102516 calc(var(--ps-night)*100%))!important; }
[data-component="InputArea"] [class*="_inputWrapper_"]:focus-within { border-color: color-mix(in srgb,#ba7950,#b9a9dba6 calc(var(--ps-night)*100%))!important; box-shadow: inset 0 2px 6px color-mix(in srgb,#8b6b4612,#07102516 calc(var(--ps-night)*100%)),0 0 0 2px color-mix(in srgb,#e8ae7a30,#0710253c calc(var(--ps-night)*100%))!important; }
[data-component="InputArea"] textarea[name="chat-message"] { color: color-mix(in srgb,#344b56,#e1e8f7ff calc(var(--ps-night)*100%))!important; -webkit-text-fill-color: color-mix(in srgb,#344b56,#e1e8f7ff calc(var(--ps-night)*100%))!important; caret-color: color-mix(in srgb,#965536,#dac8f5ff calc(var(--ps-night)*100%))!important; }
[data-component="InputArea"] textarea[name="chat-message"]::placeholder { color: color-mix(in srgb,#65717a,#bccbe4ff calc(var(--ps-night)*100%))!important; -webkit-text-fill-color: color-mix(in srgb,#65717a,#bccbe4ff calc(var(--ps-night)*100%))!important; }
[data-component="InputArea"] textarea[name="chat-message"]::selection { background: color-mix(in srgb,#f4bd83a6,#484363a6 calc(var(--ps-night)*100%)); }
[data-component="InputArea"] :is([class*="_actionBar_"],#ri-toolbar,[class*="_nativeDockActions_"]) { background: linear-gradient(color-mix(in srgb,#fffaf0c2,#31445fc2 calc(var(--ps-night)*100%)),color-mix(in srgb,#d4e7e7a6,#31445fa6 calc(var(--ps-night)*100%)))!important; border-color: color-mix(in srgb,#ffffffe0,#b7c8e79d calc(var(--ps-night)*100%))!important; box-shadow: inset 0 1px color-mix(in srgb,#fff,#c3cdf352 calc(var(--ps-night)*100%))!important; }
[data-component="InputArea"] :is([class*="_attachBtn_"],[class*="_actionBtn_"],[class*="_toolbarBtn_"],[class*="_sttBtn_"],.ri-icon-btn) { color: color-mix(in srgb,#476573,#e1e8f7ff calc(var(--ps-night)*100%))!important; }
[data-component="InputArea"] :is([class*="_attachBtn_"],[class*="_actionBtn_"],[class*="_toolbarBtn_"],.ri-icon-btn):hover:not(:disabled) { background: color-mix(in srgb,#f4ca9959,#48436359 calc(var(--ps-night)*100%))!important; color: color-mix(in srgb,#7f4f36,#dac8f5ff calc(var(--ps-night)*100%))!important; }
[data-component="InputArea"] [class*="_sttBtnActive_"] { color: color-mix(in srgb,#fff,#f1eeffff calc(var(--ps-night)*100%))!important; background: color-mix(in srgb,#ac4c59,#463a5dff calc(var(--ps-night)*100%))!important; }
[data-component="InputArea"] [class*="_sendBtn_"] { background: linear-gradient(145deg,color-mix(in srgb,#ffe0a9,#484363ff calc(var(--ps-night)*100%)),color-mix(in srgb,#f4ac7d,#69618bff calc(var(--ps-night)*100%)))!important; color: color-mix(in srgb,#63432f,#dac8f5ff calc(var(--ps-night)*100%))!important; border-color: color-mix(in srgb,#fff3d8,#b9a9dba6 calc(var(--ps-night)*100%))!important; box-shadow: inset 0 2px color-mix(in srgb,#fff8e6,#c3cdf352 calc(var(--ps-night)*100%)),inset 0 -2px color-mix(in srgb,#b775493b,#0710254a calc(var(--ps-night)*100%)),0 4px 14px color-mix(in srgb,#9e6e4c26,#07102530 calc(var(--ps-night)*100%))!important; }
[data-component="InputArea"] [class*="_sendBtnStop_"] { background: linear-gradient(color-mix(in srgb,#ffc9c1,#484363ff calc(var(--ps-night)*100%)),color-mix(in srgb,#df8c91,#69618bff calc(var(--ps-night)*100%)))!important; color: color-mix(in srgb,#6d303d,#dac8f5ff calc(var(--ps-night)*100%))!important; }
[data-component="InputArea"] button:focus-visible { outline-color: color-mix(in srgb,#935a37,#463a5dff calc(var(--ps-night)*100%))!important; }
/* The optional Response Instructions extension shares the writing desk. */
[data-component="InputArea"] #ri-panel { background: linear-gradient(145deg,color-mix(in srgb,#fff9eff5,#484363f5 calc(var(--ps-night)*100%)),color-mix(in srgb,#e7f1f1ed,#31445fed calc(var(--ps-night)*100%)))!important; color: color-mix(in srgb,#344b56,#e1e8f7ff calc(var(--ps-night)*100%))!important; border-color: color-mix(in srgb,#fff,#b7c8e7a6 calc(var(--ps-night)*100%))!important; box-shadow: 0 -5px 22px color-mix(in srgb,#7f685526,#07102530 calc(var(--ps-night)*100%))!important; }
[data-component="InputArea"] div#ri-toolbar { background: linear-gradient(color-mix(in srgb,#fffaf0d9,#31445fd9 calc(var(--ps-night)*100%)),color-mix(in srgb,#d4e7e7c2,#31445fc2 calc(var(--ps-night)*100%)))!important; border-color: color-mix(in srgb,#fff,#b7c8e7a6 calc(var(--ps-night)*100%))!important; box-shadow: inset 0 1px color-mix(in srgb,#fff,#c3cdf352 calc(var(--ps-night)*100%)),0 4px 12px color-mix(in srgb,#7f68551a,#07102521 calc(var(--ps-night)*100%))!important; }
[data-component="InputArea"] #ri-panel :is(.ri-ta,.ri-simple-ta,.ri-preview,.ri-draft-box,.ri-select,#ri-preset-select) { background: color-mix(in srgb,#fff7ec,#484363ff calc(var(--ps-night)*100%))!important; color: color-mix(in srgb,#344b56,#e1e8f7ff calc(var(--ps-night)*100%))!important; border-color: color-mix(in srgb,#a8b7b666,#b7c8e747 calc(var(--ps-night)*100%))!important; }
[data-component="InputArea"] #ri-panel textarea::placeholder { color: color-mix(in srgb,#65717a,#bccbe4ff calc(var(--ps-night)*100%))!important; }
[data-component="InputArea"] #ri-panel :is(.ri-hbtn,.ri-mode-tab,.ri-wfm-tab,.ri-chip,.ri-nav-btn) { color: color-mix(in srgb,#476573,#e1e8f7ff calc(var(--ps-night)*100%))!important; background: color-mix(in srgb,#fdf6e9,#484363ff calc(var(--ps-night)*100%))!important; border-color: color-mix(in srgb,#a8b7b64d,#b7c8e736 calc(var(--ps-night)*100%))!important; }
[data-component="InputArea"] #ri-panel .ri-on { background: color-mix(in srgb,#f8d7b1,#484363ff calc(var(--ps-night)*100%))!important; color: color-mix(in srgb,#774d36,#dac8f5ff calc(var(--ps-night)*100%))!important; border-color: color-mix(in srgb,#bc875c66,#b9a9db47 calc(var(--ps-night)*100%))!important; }
/* Both native chat lists. Actual titles, previews, menus and destructive
labels remain visible; the call status is decorative flavour only. */
[class*="_modal_"]:has([class*="_newChatCard_"]):has([class*="_freshChatCard_"]), [class*="_modal_"]:has([data-spindle-mount="manage_chats_actions"]) { background: radial-gradient(ellipse at 0 0,color-mix(in srgb,#ffdfb9a6,#484363a6 calc(var(--ps-night)*100%)),transparent 58%),linear-gradient(145deg,color-mix(in srgb,#fffaf0f2,#31445ff2 calc(var(--ps-night)*100%)),color-mix(in srgb,#e3f0f2f2,#31445ff2 calc(var(--ps-night)*100%)))!important; color: color-mix(in srgb,#344b56,#e1e8f7ff calc(var(--ps-night)*100%))!important; border-color: color-mix(in srgb,#fffffff0,#b7c8e7a6 calc(var(--ps-night)*100%))!important; box-shadow: var(--zr-glass-edge),0 25px 70px color-mix(in srgb,#6c594438,#07102546 calc(var(--ps-night)*100%))!important; }
[class*="_modal_"]:has([class*="_newChatCard_"]):has([class*="_freshChatCard_"]) [class*="_title_"], [class*="_modal_"]:has([data-spindle-mount="manage_chats_actions"]) [class*="_title_"] { color: color-mix(in srgb,#536a74,#bccbe4ff calc(var(--ps-night)*100%))!important; }
[class*="_modal_"]:has([class*="_newChatCard_"]):has([class*="_freshChatCard_"]) [class*="_title_"]::before, [class*="_modal_"]:has([data-spindle-mount="manage_chats_actions"]) [class*="_title_"]::before { color: color-mix(in srgb,#8e513b,#dac8f5ff calc(var(--ps-night)*100%))!important; text-shadow: none!important; }
[class*="_modal_"]:has([class*="_newChatCard_"]):has([class*="_freshChatCard_"]) [class*="_header_"], [class*="_modal_"]:has([data-spindle-mount="manage_chats_actions"]) [class*="_header_"] { background: linear-gradient(color-mix(in srgb,#ffffff80,#c4d4ff17 calc(var(--ps-night)*100%)),transparent)!important; border-color: color-mix(in srgb,#b4c1bd4d,#b7c8e736 calc(var(--ps-night)*100%))!important; }
[class*="_modal_"]:has([class*="_newChatCard_"]):has([class*="_freshChatCard_"]) [class*="_card_"], [class*="_modal_"]:has([data-spindle-mount="manage_chats_actions"]) [class*="_card_"] { background: linear-gradient(135deg,color-mix(in srgb,#fffdf8c9,#c4d4ff24 calc(var(--ps-night)*100%)),color-mix(in srgb,#eef5f4a6,#31445fa6 calc(var(--ps-night)*100%)) 50%,color-mix(in srgb,#ffe8d485,#48436385 calc(var(--ps-night)*100%)))!important; border-color: color-mix(in srgb,#ffffffed,#b7c8e7a6 calc(var(--ps-night)*100%))!important; box-shadow: inset 0 1px color-mix(in srgb,#fff,#c3cdf352 calc(var(--ps-night)*100%)),0 5px 15px color-mix(in srgb,#8c705112,#07102516 calc(var(--ps-night)*100%))!important; }
[class*="_modal_"]:has([class*="_newChatCard_"]):has([class*="_freshChatCard_"]) [class*="_card_"]:hover, [class*="_modal_"]:has([data-spindle-mount="manage_chats_actions"]) [class*="_card_"]:hover { border-color: color-mix(in srgb,#ca9771,#b9a9dba6 calc(var(--ps-night)*100%))!important; }
[class*="_modal_"]:has([class*="_newChatCard_"]):has([class*="_freshChatCard_"]) [class*="_card_"]::after, [class*="_modal_"]:has([data-spindle-mount="manage_chats_actions"]) [class*="_cardInfo_"]::before { color: color-mix(in srgb,#9e4c59,#dac8f5ff calc(var(--ps-night)*100%))!important; }
[class*="_modal_"]:has([class*="_newChatCard_"]):has([class*="_freshChatCard_"]) [class*="_cardActive_"]::after, [class*="_modal_"]:has([data-spindle-mount="manage_chats_actions"]) [class*="_cardActive_"] [class*="_cardInfo_"]::before { color: color-mix(in srgb,#387365,#e1e8f7ff calc(var(--ps-night)*100%))!important; }
[class*="_modal_"]:has([class*="_newChatCard_"]):has([class*="_freshChatCard_"]) [class*="_card_"]::before { background: color-mix(in srgb,#c17e8380,#69618b80 calc(var(--ps-night)*100%))!important; }
[class*="_modal_"]:has([class*="_newChatCard_"]):has([class*="_freshChatCard_"]) [class*="_cardActive_"]::before { background: linear-gradient(color-mix(in srgb,#99c5b9,#526d91ff calc(var(--ps-night)*100%)),color-mix(in srgb,#5a9184,#20314cff calc(var(--ps-night)*100%)))!important; }
[class*="_modal_"]:has([class*="_newChatCard_"]):has([class*="_freshChatCard_"]) [class*="_cardLabel_"], [class*="_modal_"]:has([data-spindle-mount="manage_chats_actions"]) [class*="_cardName_"] { color: color-mix(in srgb,#344b56,#e1e8f7ff calc(var(--ps-night)*100%))!important; }
[class*="_modal_"]:has([class*="_newChatCard_"]):has([class*="_freshChatCard_"]) :is([class*="_previewText_"],[class*="_metaRow_"],[class*="_freshChatSubtitle_"]), [class*="_modal_"]:has([data-spindle-mount="manage_chats_actions"]) :is([class*="_cardPreview_"],[class*="_cardMeta_"],[class*="_subtitle_"]) { color: color-mix(in srgb,#536b77,#bccbe4ff calc(var(--ps-night)*100%))!important; }
[class*="_modal_"]:has([class*="_newChatCard_"]):has([class*="_freshChatCard_"]) :is([class*="_count_"],[class*="_activeBadge_"]), [class*="_modal_"]:has([data-spindle-mount="manage_chats_actions"]) [class*="_activeBadge_"] { color: color-mix(in srgb,#3e6e61,#e1e8f7ff calc(var(--ps-night)*100%))!important; background: color-mix(in srgb,#bdded366,#31445f66 calc(var(--ps-night)*100%))!important; border-color: color-mix(in srgb,#618b7f26,#b7c8e71b calc(var(--ps-night)*100%))!important; }
[class*="_modal_"]:has([class*="_newChatCard_"]):has([class*="_freshChatCard_"]) :is([class*="_menuBtn_"],[class*="_freshChatIcon_"],[class*="_newChatIcon_"]), [class*="_modal_"]:has([data-spindle-mount="manage_chats_actions"]) [class*="_actionBtnPrimary_"] { color: color-mix(in srgb,#426877,#e1e8f7ff calc(var(--ps-night)*100%))!important; background: linear-gradient(color-mix(in srgb,#fff9ef,#484363ff calc(var(--ps-night)*100%)),color-mix(in srgb,#c5e4e9,#31445fff calc(var(--ps-night)*100%)))!important; border-color: color-mix(in srgb,#fff,#b7c8e7a6 calc(var(--ps-night)*100%))!important; }
[class*="_modal_"]:has([class*="_newChatCard_"]):has([class*="_freshChatCard_"]) [class*="_deleteAllBtn_"] { color: color-mix(in srgb,#9f3e4a,#dac8f5ff calc(var(--ps-night)*100%))!important; background: color-mix(in srgb,#e9959e1a,#69618b1a calc(var(--ps-night)*100%))!important; border-color: color-mix(in srgb,#b95f6a4d,#b9a9db36 calc(var(--ps-night)*100%))!important; }
[class*="_modal_"]:has([class*="_newChatCard_"]):has([class*="_freshChatCard_"]) [class*="_editInput_"], [class*="_modal_"]:has([data-spindle-mount="manage_chats_actions"]) :is([class*="_searchInput_"],[class*="_editInput_"]) { color: color-mix(in srgb,#344b56,#e1e8f7ff calc(var(--ps-night)*100%))!important; background: color-mix(in srgb,#fff8ec,#484363ff calc(var(--ps-night)*100%))!important; border-color: color-mix(in srgb,#7e9b9e66,#b7c8e747 calc(var(--ps-night)*100%))!important; }
[class*="_modal_"]:has([data-spindle-mount="manage_chats_actions"]) input::placeholder { color: color-mix(in srgb,#64747b,#bccbe4ff calc(var(--ps-night)*100%))!important; }
[class*="_modal_"]:has([data-spindle-mount="manage_chats_actions"]) [class*="_cardActions_"] button { color: color-mix(in srgb,#526c78,#bccbe4ff calc(var(--ps-night)*100%))!important; border-color: color-mix(in srgb,#79959d40,#b7c8e72d calc(var(--ps-night)*100%))!important; }
/* Home — keep every native column count, row offset and 3:4 footprint. */
[data-component="LandingPageHeader"] { border-color: color-mix(in srgb,#fffffff0,#b7c8e7a6 calc(var(--ps-night)*100%))!important; }
[data-component="LandingPageHeader"]::before { opacity: .25; }
[data-component="LandingPageHeader"] [class*="_logoText_"]::before { content: 'ZEN RAIN · GOLDEN HOUR EDITION'; color: color-mix(in srgb,#8d5a40,#dac8f5ff calc(var(--ps-night)*100%)); }
[data-component="LandingPageHeader"] h1 { color: color-mix(in srgb,#596f78,#bccbe4ff calc(var(--ps-night)*100%))!important; }
[data-component="LandingPageHeader"] [class*="_accountName_"] { color: color-mix(in srgb,#496572,#e1e8f7ff calc(var(--ps-night)*100%))!important; }
[data-component="LandingPageHeader"] h1::before { content: 'Paper Skies'; color: color-mix(in srgb,#3c5867,#e1e8f7ff calc(var(--ps-night)*100%)); text-shadow: 0 2px color-mix(in srgb,#fff8edcc,#c3cdf341 calc(var(--ps-night)*100%)); }
[data-component="LandingPageHeader"] [class*="_taglineBtn_"] { color: color-mix(in srgb,#556c75,#bccbe4ff calc(var(--ps-night)*100%))!important; }
[data-component="LandingPageHeader"] [class*="_logoIcon_"] { background: linear-gradient(135deg,color-mix(in srgb,#fff9f0,#31445fff calc(var(--ps-night)*100%)),color-mix(in srgb,#ffdcaa,#484363ff calc(var(--ps-night)*100%)) 50%,color-mix(in srgb,#b9dfe9,#31445fff calc(var(--ps-night)*100%)))!important; border-color: color-mix(in srgb,#fff,#b7c8e7a6 calc(var(--ps-night)*100%))!important; box-shadow: var(--zr-glass-edge)!important; }
[data-component="LandingPageHeader"] [class*="_logoIcon_"]::before { width: 48px; height: 42px; background: url('assets/paper-skies-crane.png') center/contain no-repeat; mask: none; -webkit-mask: none; filter: none; }
[data-component="LandingPageHeader"] [class*="_accountBtn_"], [data-component="LandingPageTabs"] :is([class*="_iconButton_"],[class*="_hiddenManagerBtn_"]) { background: linear-gradient(color-mix(in srgb,#fff9efd9,#484363d9 calc(var(--ps-night)*100%)),color-mix(in srgb,#deedf0b3,#31445fb3 calc(var(--ps-night)*100%)))!important; color: color-mix(in srgb,#496572,#e1e8f7ff calc(var(--ps-night)*100%))!important; border-color: color-mix(in srgb,#fff,#b7c8e7a6 calc(var(--ps-night)*100%))!important; box-shadow: inset 0 1px color-mix(in srgb,#fff,#c3cdf352 calc(var(--ps-night)*100%)),0 3px 8px color-mix(in srgb,#7d705017,#0710251d calc(var(--ps-night)*100%))!important; }
[data-component="LandingPageTabs"] [class*="_searchField_"] { background: linear-gradient(color-mix(in srgb,#fff9efcc,#484363cc calc(var(--ps-night)*100%)),color-mix(in srgb,#e9f0eec9,#31445fc9 calc(var(--ps-night)*100%)))!important; border-color: color-mix(in srgb,#fff,#b7c8e7a6 calc(var(--ps-night)*100%))!important; box-shadow: var(--zr-glass-edge)!important; color: color-mix(in srgb,#526d76,#bccbe4ff calc(var(--ps-night)*100%))!important; }
[data-component="LandingPageTabs"] [class*="_searchInput_"] { color: color-mix(in srgb,#344b56,#e1e8f7ff calc(var(--ps-night)*100%))!important; }
[data-component="LandingPageTabs"] [class*="_searchInput_"]::placeholder { color: color-mix(in srgb,#60747e,#bccbe4ff calc(var(--ps-night)*100%))!important; }
[data-component="LandingPageChats"] [class*="_cardTilt_"] > [class*="_card_"]::before { content: 'PAPER LINE · INCOMING'; background: color-mix(in srgb,#fffaeec9,#484363c9 calc(var(--ps-night)*100%)); border-color: color-mix(in srgb,#fff,#b7c8e7a6 calc(var(--ps-night)*100%)); color: color-mix(in srgb,#886047,#dac8f5ff calc(var(--ps-night)*100%)); }
[data-component="LandingPageChats"] [class*="_cardName_"] { color: color-mix(in srgb,#344f5e,#e1e8f7ff calc(var(--ps-night)*100%))!important; text-shadow: 0 1px color-mix(in srgb,#fff,#c3cdf352 calc(var(--ps-night)*100%))!important; }
[data-component="LandingPageChats"] [class*="_cardName_"]::after, [data-component="LandingPageChats"] [class*="_cardMeta_"]::before { color: color-mix(in srgb,#5a6d74,#bccbe4ff calc(var(--ps-night)*100%))!important; }
[data-component="LandingPageChats"] [class*="_cardImage_"] { border-color: color-mix(in srgb,#fff5e8,#b9a9dba6 calc(var(--ps-night)*100%))!important; box-shadow: 0 0 0 4px color-mix(in srgb,#fbe4c580,#c3cdf329 calc(var(--ps-night)*100%)),0 0 0 5px color-mix(in srgb,#ffffffb3,#c3cdf339 calc(var(--ps-night)*100%)),0 8px 25px color-mix(in srgb,#84664426,#07102530 calc(var(--ps-night)*100%))!important; }
[data-component="LandingPageChats"] [class*="_cardMeta_"] { background: linear-gradient(color-mix(in srgb,#fffbf1,#31445fff calc(var(--ps-night)*100%)),color-mix(in srgb,#e6f0ec,#31445fff calc(var(--ps-night)*100%)))!important; color: color-mix(in srgb,#536b70,#bccbe4ff calc(var(--ps-night)*100%))!important; border-color: color-mix(in srgb,#fff,#b7c8e7a6 calc(var(--ps-night)*100%))!important; box-shadow: inset 0 2px color-mix(in srgb,#fff,#c3cdf352 calc(var(--ps-night)*100%)),0 5px 12px color-mix(in srgb,#7d6b5317,#0710251d calc(var(--ps-night)*100%))!important; }
[data-component="LandingPageChats"] [class*="_cardBtn_"]::before { background: linear-gradient(145deg,color-mix(in srgb,#c4e4e9,#31445fff calc(var(--ps-night)*100%)),color-mix(in srgb,#77b5c5,#526d91ff calc(var(--ps-night)*100%))); border-color: color-mix(in srgb,#fff5e8,#b9a9dba6 calc(var(--ps-night)*100%)); box-shadow: inset 0 2px color-mix(in srgb,#ffffffc9,#c3cdf340 calc(var(--ps-night)*100%)),inset 0 -2px color-mix(in srgb,#467b8526,#07102530 calc(var(--ps-night)*100%)),0 5px 14px color-mix(in srgb,#77644c26,#07102530 calc(var(--ps-night)*100%)); color: color-mix(in srgb,#365b69,#e1e8f7ff calc(var(--ps-night)*100%)); }
[data-component="LandingPageChats"] [class*="_cardBtn_"]::after { background: linear-gradient(145deg,color-mix(in srgb,#f9c8b8,#484363ff calc(var(--ps-night)*100%)),color-mix(in srgb,#df9090,#69618bff calc(var(--ps-night)*100%))); border-color: color-mix(in srgb,#fff5e8,#b9a9dba6 calc(var(--ps-night)*100%)); box-shadow: inset 0 2px color-mix(in srgb,#ffffffc9,#c3cdf340 calc(var(--ps-night)*100%)),inset 0 -2px color-mix(in srgb,#ae656326,#07102530 calc(var(--ps-night)*100%)),0 5px 14px color-mix(in srgb,#77644c26,#07102530 calc(var(--ps-night)*100%)); color: color-mix(in srgb,#763f49,#dac8f5ff calc(var(--ps-night)*100%)); }
::-webkit-scrollbar-thumb { background: color-mix(in srgb,#708f9259,#526d9159 calc(var(--ps-night)*100%)); }
@media(max-width:600px) { body::before { opacity: .5; } body::after { display: none; } }
@media(prefers-reduced-motion:reduce) {
body::before, body::after { animation: none!important; will-change: auto; transform: translateX(76vw) rotate(-8deg); opacity: .3; }
body::after { transform: translateX(30vw) rotate(4deg); }
}
/* PAPER SKIES / CELESTIAL v11. The native mode attribute drives one inherited
scalar. Registered-property interpolation blends gradient stops as well as
text and borders. No observers, timers, fake switches, or app state writes. */
@property --ps-night {
syntax: '<number>';
inherits: true;
initial-value: 0;
}
html { --ps-night: 0; transition: --ps-night 2100ms cubic-bezier(.4,0,.2,1); }
html[data-theme-mode="dark"] { --ps-night: 1; }
:root, html[data-theme-mode], body { color-scheme: light; }
html[data-theme-mode="dark"], html[data-theme-mode="dark"] body { color-scheme: dark; }
/* Fade an entire vector night sky over the day SVG; gradient images themselves
do not interpolate. Body planes no longer contain the v10 cranes. */
body::before {
content: ''; position: fixed; inset: 0; width: auto; height: auto;
background: url('assets/paper-skies-night.svg') center/cover no-repeat!important;
opacity: var(--ps-night); transform: none!important; animation: none!important;
z-index: 0!important; pointer-events: none!important; will-change: auto;
}
body::after { content: none; display: none; }
/* Move the same two cranes to the root's back plane, above the night sky and
below the app. They still cannot intercept any click or obscure foreground. */
#root::before, #root::after {
content: ''; position: fixed; inset: auto; top: 12vh; left: -230px;
width: clamp(125px,14vw,225px); height: clamp(85px,9.4vw,150px);
background: url('assets/paper-skies-crane.png') center/contain no-repeat;
z-index: -1; pointer-events: none; opacity: calc(.72 - var(--ps-night)*.38);
animation: zr-crane-flight 62s linear -18s infinite; will-change: transform;
}
#root::after { top: 67vh; width: clamp(100px,10vw,160px); height: clamp(67px,6.7vw,107px); opacity: calc(.55 - var(--ps-night)*.28); animation-duration: 86s; animation-delay: -61s; }
/* The two discs use native App's existing stacking context. Main content has
z-index 1; these fixed, non-interactive elements stay behind the conversation. */
[data-app-root]::before, [data-app-root]::after {
content: ''; position: fixed; top: 4vh; right: 3vw;
width: clamp(240px,30vw,430px); aspect-ratio: 1; height: auto;
pointer-events: none; z-index: 0; background-repeat: no-repeat; background-size: contain;
transform-origin: center;
}
[data-app-root]::before {
background-image: url('assets/paper-skies-sun.svg');
transform: translate3d(calc(var(--ps-night)*-4vw),calc(var(--ps-night)*90vh),0);
opacity: clamp(0,calc(1 - var(--ps-night)*1.35),1);
}
[data-app-root]::after {
background-image: url('assets/paper-skies-moon.svg');
transform: translate3d(calc((1 - var(--ps-night))*4vw),calc((1 - var(--ps-night))*90vh),0);
opacity: clamp(0,calc((var(--ps-night) - .2)*1.25),1);
}
/* Previously unthemed dock: color only, preserving placement and controls. */
[data-component="ChatView"] [data-spindle-mount="chat_top_dock"] {
background: var(--zr-glass-face)!important; border-color: var(--lcs-glass-border)!important;
box-shadow: var(--zr-glass-edge)!important; color: var(--lumiverse-text)!important;
}
[data-component="ChatView"] [data-spindle-mount="chat_top_dock"]::before { text-shadow: none; color: var(--lumiverse-primary-text); }
[data-component="ChatView"] [data-spindle-mount="chat_top_dock"] :is(button[class*="_toolbarBtn_"],[data-toolbar-action]) {
color: var(--lumiverse-text)!important; background: var(--lumiverse-fill)!important;
border-color: var(--lumiverse-border)!important;
}
[data-component="ChatView"] [data-spindle-mount="chat_top_dock"] :is(button[class*="_toolbarBtn_"],[data-toolbar-action]):is(:hover,:focus-visible,[aria-pressed="true"]) {
background: var(--lumiverse-primary-020)!important; color: var(--lumiverse-primary-text)!important;
}
/* Pearlescent camera capsule: sufficiently tinted to keep portrait shadows
from turning it muddy gray, while retaining gloss and a little translucency. */
[data-zr-camera-tools] {
background: linear-gradient(180deg,
color-mix(in srgb,#fff8ed,#63779b calc(var(--ps-night)*100%)),
color-mix(in srgb,#e3eff5f5,#374b70f5 calc(var(--ps-night)*100%)) 48%,
color-mix(in srgb,#ffdfc3f5,#4a446cf5 calc(var(--ps-night)*100%)))!important;
border-color: color-mix(in srgb,#fff9ee,#c3c9f49e calc(var(--ps-night)*100%))!important;
box-shadow: inset 0 1px color-mix(in srgb,#fff,#d5d6ff80 calc(var(--ps-night)*100%)),inset 0 -1px #8490b226,0 4px 12px #15203926!important;
}
[data-zr-camera-tools] [data-zr-icon] { color: color-mix(in srgb,#3e5b70,#e2e9ff calc(var(--ps-night)*100%))!important; }
[data-zr-camera-tools] [data-zr-icon="hangup"] { color: color-mix(in srgb,#994e61,#e3aecb calc(var(--ps-night)*100%))!important; }
/* The old opaque portrait fallback and generic utility fields follow mode. */
[data-component="LandingPageChats"] [class*="_cardAvatarFallback_"] { background: var(--lumiverse-card-image-bg)!important; color: var(--lumiverse-primary-text)!important; }
/* v7 assigned ink directly to these children; recoloring their parent alone
leaves nearly invisible dark-green metadata in the moonlight palette. */
[data-component="LandingPageChats"] [class*="_cardTime_"] { color: var(--lumiverse-text-muted)!important; }
[data-component="LandingPageChats"] [class*="_chatCountBadge_"] {
color: var(--lumiverse-primary-text)!important; background: var(--lumiverse-primary-010)!important;
border-color: var(--lumiverse-border)!important;
}
[data-component="InputArea"] button:focus-visible { outline-color: var(--lumiverse-primary-text)!important; }
[data-component="LandingPageHeader"] [class*="_logoText_"]::before { content: 'ZEN RAIN · UNDER THE SAME SKY'; }
[data-component="LandingPageHeader"] h1 { text-shadow: none!important; }
[data-zr-windowtitle], [data-zr-windowcontrols] { text-shadow: none; }
/* Keep the portrait's caption and remote tag legible over any user's image. */
[data-zr-camera-tag], [data-zr-call="local"] [data-zr-camera-tag] { color: #fff8f5; background: #354b67db; border-color: #d5dcf866; }
[data-zr-camera-tag], [data-component="MinimalMessage"][data-part="user"] [data-zr-camera-tag] { color: #fff8f5; background: #354b67db; border-color: #d5dcf866; }
[data-zr-camera] figcaption { color: #f5f6ff; }
@media(max-width:600px) {
body::before { opacity: var(--ps-night); }
#root::before { opacity: calc(.5 - var(--ps-night)*.23); }
#root::after { display: none; }
[data-app-root]::before, [data-app-root]::after { right: -35px; top: 3vh; width: 240px; }
}
@media(prefers-reduced-motion:reduce) {
html { transition: none!important; }
#root::before, #root::after { animation: none!important; will-change: auto; transform: translateX(76vw) rotate(-8deg); }
#root::after { transform: translateX(30vw) rotate(4deg); }
}
/* PAPER SKIES / v12 — spoken lines. [data-zr-call] [data-component="MessageContent"] span[class*="_proseDialogue_"]:where(:not(:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose,pre,code,a,button,[contenteditable="true"]),:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose,pre,code,a,button,[contenteditable="true"]) *)) is expanded at build time to
native dialogue spans, excluding code, custom cards and authored widgets.
Display-only: quotes, markdown and the native message content stay intact. */
[data-zr-call] {
--ps-speech-top: color-mix(in srgb,#fffaf0,#515575 calc(var(--ps-night)*100%));
--ps-speech-bottom: color-mix(in srgb,#f5dfcb,#343f5b calc(var(--ps-night)*100%));
--ps-speech-edge: color-mix(in srgb,#ffffffed,#c8c4ef88 calc(var(--ps-night)*100%));
--ps-speech-glint: color-mix(in srgb,#ffffffc9,#e1deff30 calc(var(--ps-night)*100%));
--ps-speech-shadow: color-mix(in srgb,#93674d20,#0e162c45 calc(var(--ps-night)*100%));
}
[data-component="MinimalMessage"] {
--ps-speech-top: color-mix(in srgb,#fffaf0,#515575 calc(var(--ps-night)*100%));
--ps-speech-bottom: color-mix(in srgb,#f5dfcb,#343f5b calc(var(--ps-night)*100%));
--ps-speech-edge: color-mix(in srgb,#ffffffed,#c8c4ef88 calc(var(--ps-night)*100%));
--ps-speech-glint: color-mix(in srgb,#ffffffc9,#e1deff30 calc(var(--ps-night)*100%));
--ps-speech-shadow: color-mix(in srgb,#93674d20,#0e162c45 calc(var(--ps-night)*100%));
}
[data-zr-call="local"] {
--ps-speech-top: color-mix(in srgb,#f5fcff,#53516f calc(var(--ps-night)*100%));
--ps-speech-bottom: color-mix(in srgb,#d7e9ed,#3f3c5b calc(var(--ps-night)*100%));
}
[data-component="MinimalMessage"][data-part="user"] {
--ps-speech-top: color-mix(in srgb,#f5fcff,#53516f calc(var(--ps-night)*100%));
--ps-speech-bottom: color-mix(in srgb,#d7e9ed,#3f3c5b calc(var(--ps-night)*100%));
}
[data-zr-call] [data-component="MessageContent"] span[class*="_proseDialogue_"]:where(:not(:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose,pre,code,a,button,[contenteditable="true"]),:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose,pre,code,a,button,[contenteditable="true"]) *)) {
display: block!important;
position: relative!important;
box-sizing: border-box!important;
width: fit-content!important;
min-width: 0!important;
max-width: calc(100% - 24px)!important;
margin: .8em auto!important;
padding: .55em 1em!important;
border: 1px solid var(--ps-speech-edge)!important;
border-radius: 20px 20px 20px 8px!important;
background: radial-gradient(ellipse 85% 60% at 15% 0%,var(--ps-speech-glint),transparent 90%),linear-gradient(180deg,var(--ps-speech-top),var(--ps-speech-bottom))!important;
color: var(--lumiverse-prose-dialogue)!important;
box-shadow: inset 0 1px 1px var(--ps-speech-glint),0 4px 12px var(--ps-speech-shadow)!important;
text-shadow: none!important;
text-align: center!important;
line-height: 1.65!important;
white-space: normal!important;
overflow-wrap: anywhere!important;
word-break: normal!important;
overflow: visible!important;
box-decoration-break: slice;
-webkit-box-decoration-break: slice;
/* Local shape, no added animation: streaming stays owned by Lumiverse. */
}
[data-component="MinimalMessage"] [data-component="MessageContent"] span[class*="_proseDialogue_"]:where(:not(:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose,pre,code,a,button,[contenteditable="true"]),:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose,pre,code,a,button,[contenteditable="true"]) *)) {
display: block!important;
position: relative!important;
box-sizing: border-box!important;
width: fit-content!important;
min-width: 0!important;
max-width: calc(100% - 24px)!important;
margin: .8em auto!important;
padding: .55em 1em!important;
border: 1px solid var(--ps-speech-edge)!important;
border-radius: 20px 20px 20px 8px!important;
background: radial-gradient(ellipse 85% 60% at 15% 0%,var(--ps-speech-glint),transparent 90%),linear-gradient(180deg,var(--ps-speech-top),var(--ps-speech-bottom))!important;
color: var(--lumiverse-prose-dialogue)!important;
box-shadow: inset 0 1px 1px var(--ps-speech-glint),0 4px 12px var(--ps-speech-shadow)!important;
text-shadow: none!important;
text-align: center!important;
line-height: 1.65!important;
white-space: normal!important;
overflow-wrap: anywhere!important;
word-break: normal!important;
overflow: visible!important;
box-decoration-break: slice;
-webkit-box-decoration-break: slice;
/* Local shape, no added animation: streaming stays owned by Lumiverse. */
}
/* Two nested silhouettes form a quiet outlined, curved tail. The inner one
overlaps the panel edge; neither pseudo-element can intercept selection. */
[data-zr-call] [data-component="MessageContent"] span[class*="_proseDialogue_"]:where(:not(:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose,pre,code,a,button,[contenteditable="true"]),:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose,pre,code,a,button,[contenteditable="true"]) *))::before,
[data-zr-call] [data-component="MessageContent"] span[class*="_proseDialogue_"]:where(:not(:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose,pre,code,a,button,[contenteditable="true"]),:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose,pre,code,a,button,[contenteditable="true"]) *))::after {
content: ''!important;
display: block!important;
position: absolute!important;
width: 15px;
height: 17px;
left: -10px;
right: auto;
bottom: 7px;
top: auto;
margin: 0;
padding: 0;
border: 0;
pointer-events: none;
clip-path: path('M 15 0 C 11 7 6 12 0 15 C 5 17 11 16 15 13 Z');
transform: none;
transform-origin: 100% 50%;
background: var(--ps-speech-edge);
}
[data-component="MinimalMessage"] [data-component="MessageContent"] span[class*="_proseDialogue_"]:where(:not(:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose,pre,code,a,button,[contenteditable="true"]),:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose,pre,code,a,button,[contenteditable="true"]) *))::before,
[data-component="MinimalMessage"] [data-component="MessageContent"] span[class*="_proseDialogue_"]:where(:not(:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose,pre,code,a,button,[contenteditable="true"]),:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose,pre,code,a,button,[contenteditable="true"]) *))::after {
content: ''!important;
display: block!important;
position: absolute!important;
width: 15px;
height: 17px;
left: -10px;
right: auto;
bottom: 7px;
top: auto;
margin: 0;
padding: 0;
border: 0;
pointer-events: none;
clip-path: path('M 15 0 C 11 7 6 12 0 15 C 5 17 11 16 15 13 Z');
transform: none;
transform-origin: 100% 50%;
background: var(--ps-speech-edge);
}
[data-zr-call] [data-component="MessageContent"] span[class*="_proseDialogue_"]:where(:not(:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose,pre,code,a,button,[contenteditable="true"]),:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose,pre,code,a,button,[contenteditable="true"]) *))::after {
left: -8px;
bottom: 7px;
background: var(--ps-speech-bottom);
transform: scale(.86);
}
[data-component="MinimalMessage"] [data-component="MessageContent"] span[class*="_proseDialogue_"]:where(:not(:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose,pre,code,a,button,[contenteditable="true"]),:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose,pre,code,a,button,[contenteditable="true"]) *))::after {
left: -8px;
bottom: 7px;
background: var(--ps-speech-bottom);
transform: scale(.86);
}
[data-zr-call="local"] [data-component="MessageContent"] span[class*="_proseDialogue_"]:where(:not(:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose,pre,code,a,button,[contenteditable="true"]),:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose,pre,code,a,button,[contenteditable="true"]) *)) { border-radius: 20px 20px 8px 20px!important; }
[data-component="MinimalMessage"][data-part="user"] [data-component="MessageContent"] span[class*="_proseDialogue_"]:where(:not(:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose,pre,code,a,button,[contenteditable="true"]),:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose,pre,code,a,button,[contenteditable="true"]) *)) { border-radius: 20px 20px 8px 20px!important; }
[data-zr-call="local"] [data-component="MessageContent"] span[class*="_proseDialogue_"]:where(:not(:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose,pre,code,a,button,[contenteditable="true"]),:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose,pre,code,a,button,[contenteditable="true"]) *))::before,
[data-zr-call="local"] [data-component="MessageContent"] span[class*="_proseDialogue_"]:where(:not(:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose,pre,code,a,button,[contenteditable="true"]),:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose,pre,code,a,button,[contenteditable="true"]) *))::after { left: auto; right: -10px; transform: scaleX(-1); transform-origin: 50% 50%; }
[data-component="MinimalMessage"][data-part="user"] [data-component="MessageContent"] span[class*="_proseDialogue_"]:where(:not(:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose,pre,code,a,button,[contenteditable="true"]),:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose,pre,code,a,button,[contenteditable="true"]) *))::before,
[data-component="MinimalMessage"][data-part="user"] [data-component="MessageContent"] span[class*="_proseDialogue_"]:where(:not(:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose,pre,code,a,button,[contenteditable="true"]),:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose,pre,code,a,button,[contenteditable="true"]) *))::after { left: auto; right: -10px; transform: scaleX(-1); transform-origin: 50% 50%; }
[data-zr-call="local"] [data-component="MessageContent"] span[class*="_proseDialogue_"]:where(:not(:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose,pre,code,a,button,[contenteditable="true"]),:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose,pre,code,a,button,[contenteditable="true"]) *))::after { right: -8px; transform: scale(-.86,.86); }
[data-component="MinimalMessage"][data-part="user"] [data-component="MessageContent"] span[class*="_proseDialogue_"]:where(:not(:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose,pre,code,a,button,[contenteditable="true"]),:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose,pre,code,a,button,[contenteditable="true"]) *))::after { right: -8px; transform: scale(-.86,.86); }
/* Keep authored emphasis inside one bubble, without a second highlight chip. */
[data-zr-call] [data-component="MessageContent"] span[class*="_proseDialogue_"]:where(:not(:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose,pre,code,a,button,[contenteditable="true"]),:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose,pre,code,a,button,[contenteditable="true"]) *)) :is(em,i,strong,b,[class*="_proseItalic_"],[class*="_proseBold_"],[class*="_proseInlineEmphasis_"]) {
color: inherit!important; background: none!important; text-shadow: none!important;
}
[data-component="MinimalMessage"] [data-component="MessageContent"] span[class*="_proseDialogue_"]:where(:not(:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose,pre,code,a,button,[contenteditable="true"]),:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose,pre,code,a,button,[contenteditable="true"]) *)) :is(em,i,strong,b,[class*="_proseItalic_"],[class*="_proseBold_"],[class*="_proseInlineEmphasis_"]) {
color: inherit!important; background: none!important; text-shadow: none!important;
}
/* Nested inline quote markup must not produce bubble-inside-bubble blocks. */
[data-zr-call] [data-component="MessageContent"] span[class*="_proseDialogue_"]:where(:not(:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose,pre,code,a,button,[contenteditable="true"]),:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose,pre,code,a,button,[contenteditable="true"]) *)) span[class*="_proseDialogue_"] {
display: inline!important; position: static!important; width: auto!important;
margin: 0!important; padding: 0!important; border: 0!important;
background: none!important; box-shadow: none!important;
}
[data-component="MinimalMessage"] [data-component="MessageContent"] span[class*="_proseDialogue_"]:where(:not(:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose,pre,code,a,button,[contenteditable="true"]),:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose,pre,code,a,button,[contenteditable="true"]) *)) span[class*="_proseDialogue_"] {
display: inline!important; position: static!important; width: auto!important;
margin: 0!important; padding: 0!important; border: 0!important;
background: none!important; box-shadow: none!important;
}
[data-zr-call] [data-component="MessageContent"] span[class*="_proseDialogue_"]:where(:not(:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose,pre,code,a,button,[contenteditable="true"]),:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose,pre,code,a,button,[contenteditable="true"]) *)) span[class*="_proseDialogue_"]::before,
[data-zr-call] [data-component="MessageContent"] span[class*="_proseDialogue_"]:where(:not(:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose,pre,code,a,button,[contenteditable="true"]),:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose,pre,code,a,button,[contenteditable="true"]) *)) span[class*="_proseDialogue_"]::after { content: none!important; display: none!important; }
[data-component="MinimalMessage"] [data-component="MessageContent"] span[class*="_proseDialogue_"]:where(:not(:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose,pre,code,a,button,[contenteditable="true"]),:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose,pre,code,a,button,[contenteditable="true"]) *)) span[class*="_proseDialogue_"]::before,
[data-component="MinimalMessage"] [data-component="MessageContent"] span[class*="_proseDialogue_"]:where(:not(:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose,pre,code,a,button,[contenteditable="true"]),:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose,pre,code,a,button,[contenteditable="true"]) *)) span[class*="_proseDialogue_"]::after { content: none!important; display: none!important; }
@media(max-width:600px) {
[data-zr-call] [data-component="MessageContent"] span[class*="_proseDialogue_"]:where(:not(:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose,pre,code,a,button,[contenteditable="true"]),:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose,pre,code,a,button,[contenteditable="true"]) *)) { padding: .5em .7em!important; margin-block: .7em!important; border-radius: 16px 16px 16px 6px!important; }
[data-component="MinimalMessage"] [data-component="MessageContent"] span[class*="_proseDialogue_"]:where(:not(:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose,pre,code,a,button,[contenteditable="true"]),:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose,pre,code,a,button,[contenteditable="true"]) *)) { padding: .5em .7em!important; margin-block: .7em!important; border-radius: 16px 16px 16px 6px!important; }
[data-zr-call="local"] [data-component="MessageContent"] span[class*="_proseDialogue_"]:where(:not(:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose,pre,code,a,button,[contenteditable="true"]),:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose,pre,code,a,button,[contenteditable="true"]) *)) { border-radius: 16px 16px 6px 16px!important; }
[data-component="MinimalMessage"][data-part="user"] [data-component="MessageContent"] span[class*="_proseDialogue_"]:where(:not(:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose,pre,code,a,button,[contenteditable="true"]),:is([data-lumiverse-inline-html-card],[data-lumiverse-html-island],[data-lumiverse-regex-action],.not-prose,.not-island-prose,pre,code,a,button,[contenteditable="true"]) *)) { border-radius: 16px 16px 6px 16px!important; }
}
/* Paper Skies v13: move the existing celestial pair to the left.
Keep their assets, native-mode animation, stacking and click-through intact. */
[data-app-root]::before,
[data-app-root]::after {
right: auto;
left: 3vw;
}
@media (max-width: 600px) {
[data-app-root]::before,
[data-app-root]::after {
left: -35px;
}
}
/* Paper Skies v14. [data-component="MinimalMessage"][data-component="MinimalMessage"][data-component="MinimalMessage"] is expanded to a deliberately specific native
message selector. The real avatar and its native image viewer stay intact. */
[data-component="MinimalMessage"][data-component="MinimalMessage"][data-component="MinimalMessage"] {
--ps-camera-width: min(400px, calc(100% - 24px));
position: relative!important;
display: flex!important;
flex-direction: column!important;
align-items: stretch!important;
gap: 0!important;
padding: 0!important;
overflow: visible!important;
}
[data-component="MinimalMessage"][data-component="MinimalMessage"][data-component="MinimalMessage"] > [class*="_avatar_"] {
position: relative!important;
inset: auto!important;
display: block!important;
align-self: center!important;
flex: none!important;
box-sizing: border-box!important;
width: var(--ps-camera-width)!important;
min-width: 0!important;
max-width: 400px!important;
height: auto!important;
min-height: 0!important;
max-height: none!important;
aspect-ratio: 400 / 297!important;
padding: 39px 7px 7px!important;
margin: 0 auto!important;
border: 1px solid var(--lcs-glass-border)!important;
border-radius: 20px!important;
background: var(--zr-glass-face)!important;
box-shadow: var(--zr-glass-edge)!important;
overflow: hidden!important;
opacity: 1!important;
transform: none!important;
mask: none!important;
-webkit-mask: none!important;
pointer-events: auto!important;
z-index: 2!important;
}
/* The image and native LazyImage fallback share the same measured viewport. */
[data-component="MinimalMessage"][data-component="MinimalMessage"][data-component="MinimalMessage"] > [class*="_avatar_"] > div,
[data-component="MinimalMessage"][data-component="MinimalMessage"][data-component="MinimalMessage"] > [class*="_avatar_"] img {
position: relative!important;
inset: auto!important;
display: block!important;
box-sizing: border-box!important;
width: 100%!important;
min-width: 0!important;
max-width: 100%!important;
height: 100%!important;
max-height: none!important;
margin: 0!important;
padding: 0!important;
border-radius: 10px 10px 14px 14px!important;
object-fit: cover!important;
object-position: center 30%!important;
opacity: 1!important;
mask: none!important;
-webkit-mask: none!important;
filter: none!important;
}
[data-component="MinimalMessage"][data-component="MinimalMessage"][data-component="MinimalMessage"] > [class*="_avatar_"] [class*="_avatarFallback_"] {
display: grid!important;
place-items: center!important;
font: 500 64px/1 var(--lumiverse-font-family)!important;
color: var(--lumiverse-text)!important;
background: var(--lumiverse-card-image-bg)!important;
}
/* These are decorative window chrome, not replacement action buttons. */
[data-component="MinimalMessage"][data-component="MinimalMessage"][data-component="MinimalMessage"] > [class*="_avatar_"]::before {
content: 'Paper Skies · Incoming';
position: absolute!important;
display: flex!important;
align-items: center!important;
box-sizing: border-box!important;
inset: 0 0 auto!important;
width: auto!important;
height: 38px!important;
padding: 0 84px 0 14px!important;
border: 0!important;
border-bottom: 1px solid var(--lumiverse-border)!important;
border-radius: 19px 19px 0 0!important;
font: 500 10px/1.3 var(--lumiverse-font-family)!important;
letter-spacing: .03em!important;
white-space: nowrap!important;
color: var(--lumiverse-text)!important;
background: url('assets/paper-skies-window-controls.svg') right 12px center / 57px 14px no-repeat!important;
box-shadow: none!important;
mask: none!important;
-webkit-mask: none!important;
transform: none!important;
pointer-events: none!important;
z-index: 4!important;
}
[data-component="MinimalMessage"][data-component="MinimalMessage"][data-component="MinimalMessage"][data-part="user"] > [class*="_avatar_"]::before { content: 'Paper Skies · Your window'; }
[data-component="MinimalMessage"][data-component="MinimalMessage"][data-component="MinimalMessage"][data-part="streaming"] > [class*="_avatar_"]::before { content: 'Paper Skies · Receiving…'; }
[data-component="MinimalMessage"][data-component="MinimalMessage"][data-component="MinimalMessage"] > [class*="_avatar_"]::after {
content: ''!important;
position: absolute!important;
display: block!important;
box-sizing: border-box!important;
top: auto!important;
bottom: 17px!important;
left: 50%!important;
right: auto!important;
width: 132px!important;
height: 35px!important;
margin: 0!important;
padding: 0!important;
transform: translateX(-50%)!important;
border: 1px solid var(--lcs-glass-border)!important;
border-radius: 99px!important;
background: url('assets/paper-skies-camera-controls-day.svg') center / 104px 22px no-repeat,
linear-gradient(180deg,color-mix(in srgb,#fff8ed,#63779b calc(var(--ps-night)*100%)),color-mix(in srgb,#e3eff5f5,#374b70f5 calc(var(--ps-night)*100%)) 48%,color-mix(in srgb,#ffdfc3f5,#4a446cf5 calc(var(--ps-night)*100%)))!important;
box-shadow: inset 0 1px color-mix(in srgb,#ffffff,#d5d6ff80 calc(var(--ps-night)*100%)),0 4px 12px #15203926!important;
opacity: 1!important;
pointer-events: none!important;
z-index: 4!important;
}
html[data-theme-mode="dark"] [data-component="MinimalMessage"][data-component="MinimalMessage"][data-component="MinimalMessage"] > [class*="_avatar_"]::after {
background-image: url('assets/paper-skies-camera-controls-night.svg'),linear-gradient(180deg,#63779b,#374b70f5 48%,#4a446cf5)!important;
}
/* Keep actual names, metadata, selection controls and extension mounts. */
[data-component="MinimalMessage"][data-component="MinimalMessage"][data-component="MinimalMessage"] > [class*="_bubble_"] > [class*="_header_"] {
position: relative!important;
display: flex!important;
flex-direction: column!important;
align-items: center!important;
justify-content: center!important;
box-sizing: border-box!important;
width: 100%!important;
min-width: 0!important;
max-width: 100%!important;
height: auto!important;
min-height: 0!important;
padding: 0!important;
margin: 16px 0 20px!important;
gap: 10px!important;
border: 0!important;
border-radius: 0!important;
background: transparent!important;
box-shadow: none!important;
backdrop-filter: none!important;
-webkit-backdrop-filter: none!important;
}
[data-component="MinimalMessage"][data-component="MinimalMessage"][data-component="MinimalMessage"] > [class*="_bubble_"] > [class*="_header_"] > [class*="_name_"] {
display: block!important;
position: static!important;
padding: 0!important;
margin: 0!important;
width: auto!important;
max-width: 100%!important;
font-size: 20px!important;
line-height: 1.4!important;
letter-spacing: .06em!important;
text-align: center!important;
white-space: normal!important;
overflow-wrap: anywhere!important;
color: var(--lumiverse-text)!important;
text-shadow: none!important;
}
[data-component="MinimalMessage"][data-component="MinimalMessage"][data-component="MinimalMessage"] > [class*="_bubble_"] > [class*="_header_"] > [class*="_metaPill_"] {
position: relative!important;
inset: auto!important;
transform: none!important;
margin: 0!important;
max-width: 100%!important;
flex-wrap: wrap!important;
white-space: normal!important;
color: var(--lumiverse-text-muted)!important;
}
[data-component="MinimalMessage"][data-component="MinimalMessage"][data-component="MinimalMessage"] > [class*="_bubble_"] > [class*="_header_"]::before,
[data-component="MinimalMessage"][data-component="MinimalMessage"][data-component="MinimalMessage"] > [class*="_bubble_"] > [class*="_header_"]::after { content: none!important; }
[data-component="MinimalMessage"][data-component="MinimalMessage"][data-component="MinimalMessage"][data-part="streaming"] > [class*="_avatar_"] {
animation: zr-receive 2.8s ease-in-out infinite;
}
@media (max-width: 600px) {
[data-component="MinimalMessage"][data-component="MinimalMessage"][data-component="MinimalMessage"] { --ps-camera-width: min(340px, calc(100% - 12px)); }
[data-component="MinimalMessage"][data-component="MinimalMessage"][data-component="MinimalMessage"] > [class*="_avatar_"] { padding-top: 35px!important; }
[data-component="MinimalMessage"][data-component="MinimalMessage"][data-component="MinimalMessage"] > [class*="_avatar_"]::before { height: 34px!important; font-size: 9px!important; }
[data-component="MinimalMessage"][data-component="MinimalMessage"][data-component="MinimalMessage"] > [class*="_bubble_"] > [class*="_header_"] > [class*="_name_"] { font-size: 18px!important; }
}
@media (prefers-reduced-motion: reduce) {
[data-component="MinimalMessage"][data-component="MinimalMessage"][data-component="MinimalMessage"], [data-component="MinimalMessage"][data-component="MinimalMessage"][data-component="MinimalMessage"]::before, [data-component="MinimalMessage"][data-component="MinimalMessage"][data-component="MinimalMessage"]::after,
[data-component="MinimalMessage"][data-component="MinimalMessage"][data-component="MinimalMessage"] *, [data-component="MinimalMessage"][data-component="MinimalMessage"][data-component="MinimalMessage"] *::before, [data-component="MinimalMessage"][data-component="MinimalMessage"][data-component="MinimalMessage"] *::after {
animation: none!important;
transition: none!important;
}
}