🦇 Bat night

dark

• Primary#c4191c
• Secondary#C5B1A6
• Background#161011
• Text#e6dad2
• Danger#f4766a
• Success#9fc7a5
• Warning#e3b86b
• Speech#e39a92
• Thoughts#a9bccd

/*
 * BELFRY — Bat Nocturne
 * Palette: Kala Black #211718 · Cape Storm #3C4755 · Space Convoy #637687 · All Systems Red #B00303 · Vintage Charm #C5B1A6
 * Fonts: "Devil Candle" (bundled, display) for titles/names/labels; digits fall back to Playfair/Georgia because the free font swaps 0-9 for a licence badge. Body stays Montserrat.
 * Composer = rounded "bell-tower" bar: 9-slice frame + kawaii bat-duo mascot, cobweb, sleeping bats, flock, bat-ear field, blood-moon send (assets/composer-*.svg).
 * Gallery cards use the kawaii bat-sticker frames assets/card-frame-*.svg (2:3). Tuning knobs live in the first block.
 */
@font-face{font-family:"Devil Candle";src:url("assets/devilcandle.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0020-002F,U+003A-007E,U+00A0-024F,U+2010-2027,U+2030-205E}
:root,html[data-theme-mode],body {
  --bat-black: #211718;
  --bat-deep: #140d0e;
  --bat-storm: #3C4755;
  --bat-convoy: #637687;
  --bat-red: #B00303;
  --bat-red-bright: #d62a26;
  --bat-red-text: #ee8b82;
  --bat-charm: #C5B1A6;
  /* expanded palette (tints & shades derived from the five core colours) */
  --bat-ink: #0f1318;      /* midnight ink: Cape Storm, darkened */
  --bat-dusk: #2a3440;     /* dusk slate: between Kala Black and Cape Storm */
  --bat-mist: #a9bccd;     /* mist blue: Space Convoy, lightened */
  --bat-wine: #4a0b0e;     /* wine: All Systems Red, deepened */
  --bat-rose: #e39a92;     /* rose dust: red melted into Vintage Charm */
  --bat-bone: #f1e9e2;     /* bone: Vintage Charm, lightened */
  --bat-ember: #ff6a5c;    /* ember: red, brightened for hover/glow */
  --bat-cream: #ece0d8;
  --bat-display: "Devil Candle", "Playfair Display", "Didot", "Georgia", serif;
  --bat-sans: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --lumiverse-primary: #c4191c !important;
  --lumiverse-primary-hover: #d62a26 !important;
  --lumiverse-primary-text: #ee8b82 !important;
  --lumiverse-primary-light: #b003031f !important;
  --lumiverse-primary-soft: #b003031f !important;
  --lumiverse-primary-muted: #b0030399 !important;
  --lumiverse-primary-010: #b003031a !important;
  --lumiverse-primary-015: #b0030326 !important;
  --lumiverse-primary-020: #b0030333 !important;
  --lumiverse-primary-050: #b0030380 !important;
  --lumiverse-primary-contrast: #fbeee9 !important;
  --lumiverse-primary-deep: #3a0f10 !important;
  --lumiverse-primary-deep-hover: #511517 !important;
  --lumiverse-primary-deep-contrast: #fbeee9 !important;
  --lumiverse-secondary: #C5B1A6 !important;
  --lumiverse-secondary-hover: #ece0d8 !important;
  --lumiverse-secondary-border: #637687 !important;
  --lumiverse-bg: #161011 !important;
  --lumiverse-bg-elevated: #211718 !important;
  --lumiverse-bg-hover: #2c2124 !important;
  --lumiverse-bg-dark: #120c0d !important;
  --lumiverse-bg-darker: #0e0809 !important;
  --lumiverse-bg-deep: #0b0607 !important;
  --lumiverse-bg-040: #16101166 !important;
  --lumiverse-bg-050: #16101180 !important;
  --lumiverse-bg-070: #161011b3 !important;
  --lumiverse-bg-elevated-040: #21171866 !important;
  --lumiverse-bg-deep-080: #0b0607cc !important;
  --lumiverse-card-bg: #211718 !important;
  --lumiverse-card-image-bg: #140d0e !important;
  --lumiverse-surface: #211718 !important;
  --lumiverse-surface-raised: #2a1f21 !important;
  --lumiverse-surface-hover: #35282b !important;
  --lumiverse-surface-muted: #ffffff05 !important;
  --lumiverse-input-bg: #120c0d !important;
  --lumiverse-text: #e6dad2 !important;
  --lumiverse-text-primary: #e6dad2 !important;
  --lumiverse-text-secondary: #C5B1A6 !important;
  --lumiverse-text-muted: #b2a198 !important;
  --lumiverse-text-dim: #94857d !important;
  --lumiverse-text-hint: #7d706a !important;
  --lumiverse-icon: #e6dad2 !important;
  --lumiverse-icon-muted: #b2a198 !important;
  --lumiverse-icon-dim: #94857d !important;
  --lumiverse-border: #3C4755 !important;
  --lumiverse-border-hover: #637687 !important;
  --lumiverse-border-light: #ffffff14 !important;
  --lumiverse-border-subtle: #ffffff10 !important;
  --lumiverse-border-neutral: #46505b !important;
  --lumiverse-border-neutral-hover: #7b8e9e !important;
  --lumiverse-fill-subtle: #ffffff04 !important;
  --lumiverse-fill: #ffffff09 !important;
  --lumiverse-fill-hover: #ffffff13 !important;
  --lumiverse-fill-medium: #ffffff0d !important;
  --lumiverse-fill-strong: #ffffff17 !important;
  --lumiverse-fill-heavy: #ffffff20 !important;
  --lumiverse-fill-deepest: #ffffff29 !important;
  --lumiverse-danger: #f4766a !important;
  --lumiverse-danger-hover: #ff9488 !important;
  --lumiverse-danger-015: #f4766a26 !important;
  --lumiverse-danger-020: #f4766a33 !important;
  --lumiverse-danger-050: #f4766a80 !important;
  --lumiverse-error: #f4766a !important;
  --lumiverse-success: #9fc7a5 !important;
  --lumiverse-success-015: #9fc7a526 !important;
  --lumiverse-success-020: #9fc7a533 !important;
  --lumiverse-success-050: #9fc7a580 !important;
  --lumiverse-warning: #e3b86b !important;
  --lumiverse-warning-015: #e3b86b26 !important;
  --lumiverse-warning-020: #e3b86b33 !important;
  --lumiverse-warning-050: #e3b86b80 !important;
  --lumiverse-radius-sm: 5px !important;
  --lumiverse-radius: 8px !important;
  --lumiverse-radius-md: 11px !important;
  --lumiverse-radius-lg: 14px !important;
  --lumiverse-radius-xl: 18px !important;
  --lumiverse-font-family: var(--bat-sans) !important;
  --lumiverse-prose-dialogue: #e39a92 !important;
  --lumiverse-prose-italic: #a9bccd !important;
  --lumiverse-prose-bold: #f4e7df !important;
  --lumiverse-prose-blockquote: #C5B1A6 !important;
  --lumiverse-prose-link: #ee8b82 !important;
  --lumiverse-shadow: 0 6px 22px #0006 !important;
  --lumiverse-shadow-sm: 0 3px 12px #0005 !important;
  --lumiverse-shadow-md: 0 12px 36px #0007 !important;
  --lumiverse-shadow-lg: 0 24px 80px #000a, 0 0 1px #B0030366 !important;
  --lumiverse-shadow-xl: 0 30px 100px #000b !important;
  --lumiverse-highlight-inset: inset 0 1px 0 #ffffff0d !important;
  --lumiverse-gradient-modal: linear-gradient(150deg,#3C4755 0%,#2a3440 28%,#211718 70%,#160d0e 100%) !important;
  --lumiverse-modal-backdrop: #07030499 !important;
  --lcs-glass-bg: #211718ee !important;
  --lcs-glass-bg-hover: #2a1f21f2 !important;
  --lcs-glass-border: #3C4755 !important;
  --lcs-glass-border-hover: #637687 !important;
  --lcs-radius: 14px !important;
  color-scheme: dark;
}

html,body { background:var(--bat-deep)!important; color:var(--lumiverse-text); font-family:var(--bat-sans)!important }
body {
  background-image:url("assets/bat-background.svg")!important;
  background-size:cover!important; background-position:center top!important;
  background-attachment:fixed!important; background-repeat:no-repeat!important;
}


/* ---------- background: let it show through the app shell ---------- */
html,body,#root,[data-app-root],[data-app-root]>main,[data-component="LandingPage"],[data-component="ChatView"],[data-lumiverse-surface="chat-body"],[data-lumiverse-surface="chat-column"],[data-lumiverse-surface="chat-column-inner"] { background-color:transparent!important }
html { background:var(--bat-deep)!important }
[data-component="LandingPage"]::after,
[data-component="ChatView"]::before {
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:url("assets/bat-background.svg") center top/cover no-repeat;
}
[data-component="ChatView"]::before { opacity:.9 }

/* ---------- scrollbars ---------- */
* { scrollbar-width:thin; scrollbar-color:#637687 transparent }
*::-webkit-scrollbar { width:8px; height:8px }
*::-webkit-scrollbar-thumb { background:#3C4755; border-radius:8px }
*::-webkit-scrollbar-thumb:hover { background:#637687 }
::selection { background:#B0030399; color:#fff }

/* ---------- titlebar ---------- */
[data-component="DesktopPwaTitlebar"] { background:linear-gradient(90deg,#0f1318,#211718 50%,#4a0b0e)!important; border-bottom:1px solid #3C4755!important; color:var(--bat-charm)!important; font-family:var(--bat-display)!important; letter-spacing:.08em }

/* ---------- landing header (v12): framed belfry bar ---------- */
@keyframes hdrFlutter { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-4px) } }
@keyframes hdrSway { 0%,100% { transform:rotate(-1.2deg) } 50% { transform:rotate(1.2deg) } }
[data-component="LandingPageHeader"] {
  position:relative!important; isolation:isolate; overflow:visible!important;
  margin-top:10px!important;
  padding:6px 14px!important; min-height:116px; box-sizing:border-box;
  border:30px solid transparent!important;
  border-image:url("assets/hdr-frame.png") 64 round!important;
  border-radius:30px!important;
  /* ghost bats + dusk wash live INSIDE the frame (clipped to the padding box) */
  background:
    url("assets/hdr-ghost-wine.png") 64% 50px/92px auto no-repeat,
    url("assets/hdr-ghost-plum.png") 19% 96px/74px auto no-repeat,
    linear-gradient(120deg,#3C4755f2,#2a3440ee 48%,#2b1d20f2)!important;
  background-clip:border-box!important; background-origin:border-box!important;
  box-shadow:none!important;
  filter:drop-shadow(0 8px 14px #0008);
}
/* clip the wash to the frame's inner rounded shape without touching the decor that overhangs */
[data-component="LandingPageHeader"]::before {
  content:""; position:absolute; inset:-30px; z-index:0; pointer-events:none;
  background:
    url("assets/composer-cobweb.svg") 10px 10px/90px 90px no-repeat,
    url("assets/hdr-sky.png") calc(50% - 20px) 10px/190px auto no-repeat;
}
[data-component="LandingPageHeader"]::after {
  content:""; position:absolute; inset:-44px -30px -38px -30px; z-index:3; pointer-events:none;
  background:
    url("assets/hdr-flyers.png") right 34px top 10px/112px auto no-repeat,
    url("assets/hdr-bat-blue.png") left 31% bottom -2px/78px auto no-repeat;
  animation:hdrFlutter 6s ease-in-out infinite;
}
[data-component="LandingPageHeader"]>* { position:relative; z-index:2 }
[data-component="LandingPageHeader"] [class*="_logoIcon_"] { width:62px!important; height:62px!important; background:url("assets/bat-logo.svg") center/contain no-repeat!important; filter:drop-shadow(0 3px 6px #0008) }
[data-component="LandingPageHeader"] [class*="_logoIcon_"] svg { display:none!important }
/* no red ring / glow / box around the bat mascot */
[data-component="LandingPageHeader"] :is([class*="_logo_"],[class*="_logoIcon_"]) { border:0!important; outline:0!important; box-shadow:none!important; background-color:transparent!important; border-radius:0!important }
[data-component="LandingPageHeader"] :is([class*="_logo_"],[class*="_logoIcon_"])::before,
[data-component="LandingPageHeader"] :is([class*="_logo_"],[class*="_logoIcon_"])::after,
[data-component="LandingPageHeader"] [class*="_logoGlow_"] { display:none!important; content:none!important }
[data-component="LandingPageHeader"] h1 { font-family:var(--bat-display)!important; font-weight:400!important; font-synthesis:none; font-size:clamp(32px,3.3vw,47px)!important; line-height:1!important; letter-spacing:.1em!important; text-transform:uppercase!important; color:var(--bat-bone)!important; text-shadow:2px 3px 0 var(--bat-red) }
[data-component="LandingPageHeader"] [class*="_taglineBtn_"] { color:var(--bat-charm)!important; font-family:var(--bat-display)!important; font-size:clamp(13px,1.4vw,20px)!important; letter-spacing:.12em; text-transform:uppercase }
[data-component="LandingPageHeader"] [class*="_accountBtn_"] { background:#1c1416d9!important; border:1px solid #4b5766!important; color:var(--bat-charm)!important; border-radius:999px!important; backdrop-filter:blur(3px) }
[data-component="LandingPageHeader"] [class*="_accountBtn_"]:hover { border-color:var(--bat-red)!important; color:var(--bat-cream)!important; background:#B003031f!important }
@media (max-width:1180px) {
  [data-component="LandingPageHeader"]::before { background-image:url("assets/composer-cobweb.svg"),none; background-size:96px 96px,auto; background-position:6px 6px,0 0 }
  [data-component="LandingPageHeader"] { background:linear-gradient(120deg,#3C4755f2,#2a3440ee 48%,#2b1d20f2)!important; background-clip:border-box!important; background-origin:border-box!important }
}
@media (max-width:720px) {
  [data-component="LandingPageHeader"] { border-width:24px!important; padding:4px 8px!important; min-height:0 }
  [data-component="LandingPageHeader"]::before { inset:-24px }
  [data-component="LandingPageHeader"]::after { background-size:76px auto,64px auto; right:-10px; background-position:right 24px top 44px,left 20% bottom 18px }
  [data-component="LandingPageHeader"] [class*="_logoIcon_"] { width:46px!important; height:46px!important }
}
@media (prefers-reduced-motion:reduce) { [data-component="LandingPageHeader"]::after { animation:none } }


/* ---------- landing toolbar / search ---------- */
[data-component="LandingPageTabs"] [class*="_searchInput_"] { background:#120c0d!important; border:1px solid #3C4755!important; border-radius:999px!important; color:var(--bat-cream)!important }
[data-component="LandingPageTabs"] [class*="_searchInput_"]:focus { border-color:var(--bat-red)!important; box-shadow:0 0 0 3px #B0030333!important; outline:none!important }
[data-component="LandingPageTabs"] :is([class*="_iconButton_"],[class*="_hiddenManagerBtn_"]) { background:#211718!important; border:1px solid #3C4755!important; color:var(--bat-charm)!important; border-radius:10px!important }
[data-component="LandingPageTabs"] :is([class*="_iconButton_"],[class*="_hiddenManagerBtn_"]):hover,
[data-component="LandingPageTabs"] [aria-pressed="true"] { border-color:var(--bat-red)!important; color:var(--bat-red-text)!important; background:#B0030320!important }

/* ---------- gallery cards: kawaii bat-sticker frames in four colourways (plum, storm, wine, dusk) ---------- */
[data-component="LandingPage"] [class*="_cardTilt_"] { transform:none!important; perspective:none!important; --frame:url("assets/card-frame-plum.svg"); --glow:#cfb5d6; --plate-fg:#2d2a47; --plate-chip:#2d2a4720 }
[data-component="LandingPage"] [class*="_cardTilt_"]:nth-child(4n+2) { --frame:url("assets/card-frame-storm.svg"); --glow:#9fb2c2; --plate-fg:#25304a; --plate-chip:#25304a20 }
[data-component="LandingPage"] [class*="_cardTilt_"]:nth-child(4n+3) { --frame:url("assets/card-frame-wine.svg"); --glow:#e39a92; --plate-fg:#3a1626; --plate-chip:#3a162620 }
[data-component="LandingPage"] [class*="_cardTilt_"]:nth-child(4n+4) { --frame:url("assets/card-frame-dusk.svg"); --glow:#b9a6d8; --plate-fg:#221f33; --plate-chip:#221f3320 }
[data-component="LandingPage"] [class*="_card_"] {
  position:relative!important; background:transparent!important; border:0!important; border-radius:0!important;
  box-shadow:none!important; overflow:visible!important; isolation:isolate;
  filter:drop-shadow(0 10px 14px #000a); transition:transform .42s cubic-bezier(.34,1.56,.64,1), filter .3s ease!important; will-change:transform;
}
/* frame sits BEHIND the button so the name plate text is never covered */
[data-component="LandingPage"] [class*="_card_"]::before {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:var(--frame) center/100% 100% no-repeat;
}
[data-component="LandingPage"] [class*="_cardBtn_"] {
  position:relative!important; z-index:1!important; display:block!important; box-sizing:border-box!important; width:100%!important;
  aspect-ratio:2 / 3!important; padding:0!important; border:0!important; border-radius:0!important;
  background:transparent!important; text-align:left!important; overflow:visible!important; color:var(--plate-fg)!important;
}
[data-component="LandingPage"] [class*="_cardImage_"] {
  position:absolute!important; left:13.33%!important; top:37.33%!important; width:73.33%!important; height:48.89%!important;
  inset-inline-end:auto!important; bottom:auto!important; right:auto!important;
  aspect-ratio:auto!important; margin:0!important; border-radius:9px!important; overflow:hidden!important;
  background:#140d0e!important; z-index:1!important; transform:none!important;
}
[data-component="LandingPage"] [class*="_cardImage_"]>div,[data-component="LandingPage"] [class*="_cardImage_"]>picture { height:100%!important }
[data-component="LandingPage"] [class*="_cardImage_"] img { width:100%!important; height:100%!important; object-fit:cover!important; border-radius:0!important; transform:scale(1); transition:transform .6s cubic-bezier(.2,.8,.3,1), filter .4s ease; filter:saturate(.95) contrast(1.03) }
[data-component="LandingPage"] [class*="_cardImageOverlay_"] { background:linear-gradient(180deg,transparent 65%,#140d0e99)!important }
[data-component="LandingPage"] [class*="_cardContent_"] {
  position:absolute!important; left:13.33%!important; right:auto!important; bottom:auto!important; width:73.33%!important; top:87.4%!important; height:8.6%!important;
  z-index:5!important; box-sizing:border-box!important; display:flex!important; align-items:center!important; justify-content:space-between!important;
  gap:6px!important; padding:0 13px 0 11px!important; margin:0!important; background:none!important; border:0!important;
  opacity:1!important; visibility:visible!important; transform:none!important; clip-path:none!important; overflow:visible!important; max-height:none!important;
}
[data-component="LandingPage"] [class*="_cardName_"] {
  display:flex!important; align-items:center!important; gap:5px!important; flex:1 1 auto!important; min-width:0!important; margin:0!important; padding:0!important;
  position:static!important; height:auto!important; background:none!important; border:0!important;
  opacity:1!important; visibility:visible!important; transform:none!important; overflow:hidden!important;
  color:var(--plate-fg)!important; -webkit-text-fill-color:var(--plate-fg)!important;
  font:400 15px/1.1 var(--bat-display)!important; font-synthesis:none; letter-spacing:.04em; white-space:nowrap!important;
}
[data-component="LandingPage"] [class*="_cardName_"] span { display:block!important; overflow:hidden!important; text-overflow:ellipsis!important; white-space:nowrap!important; color:inherit!important; opacity:1!important; visibility:visible!important }
[data-component="LandingPage"] [class*="_cardName_"] svg { flex:none; color:#c0394f!important }
[data-component="LandingPage"] [class*="_cardMeta_"] { position:static!important; display:flex!important; flex:none!important; align-items:center!important; gap:6px!important; margin:0!important; padding:0!important; background:none!important; border:0!important; font-size:10px!important; color:var(--plate-fg)!important; opacity:1!important; transform:none!important; visibility:visible!important }
[data-component="LandingPage"] [class*="_cardTime_"] { display:none!important }
[data-component="LandingPage"] [class*="_chatCountBadge_"] { display:inline-flex!important; align-items:center; gap:3px; background:var(--plate-chip)!important; color:var(--plate-fg)!important; border:1px solid currentColor!important; border-radius:999px!important; padding:0 6px!important; line-height:16px!important }
[data-component="LandingPage"] [class*="_cardShine_"] { display:none!important }
[data-component="LandingPage"] [class*="_deleteBtn_"] { z-index:6!important; background:#211718e6!important; border:1px solid #637687!important; color:var(--bat-charm)!important; border-radius:50%!important }
[data-component="LandingPage"] [class*="_deleteBtn_"]:hover { background:var(--bat-red)!important; color:#fff!important; border-color:var(--bat-ember)!important }

/* ---------- card selection animation: hover / keyboard focus / press ----------
 * hover & focus : springy hop with a tiny wiggle (alternates left/right by column), glow in the card's own colour,
 *                 floating bats + sparkles around it, portrait zooms and a light sweep crosses it
 * press         : squish, then springs back up on release */
@keyframes batBob { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-3px) } }
@keyframes batShine { from { transform:translateX(-160%) skewX(-18deg) } to { transform:translateX(300%) skewX(-18deg) } }
[data-component="LandingPage"] [class*="_card_"]::after {
  content:""; position:absolute; inset:-12px; z-index:7; pointer-events:none;
  background:url("assets/card-hover-fx.svg") center / 100% 100% no-repeat;
  opacity:0; transform:scale(.88); transition:opacity .25s ease, transform .45s cubic-bezier(.34,1.56,.64,1);
}
[data-component="LandingPage"] [class*="_cardImage_"]::after {
  content:""; position:absolute; top:-10%; bottom:-10%; left:0; width:38%; z-index:3; pointer-events:none; opacity:0;
  background:linear-gradient(90deg,transparent,#ffffff59,transparent); transform:translateX(-160%) skewX(-18deg);
}
[data-component="LandingPage"] [class*="_card_"]:is(:hover,:has(:focus-visible)) {
  z-index:6; transform:translateY(-10px) rotate(-1.4deg) scale(1.035)!important;
  filter:drop-shadow(0 18px 20px #000c) drop-shadow(0 0 14px var(--glow));
}
[data-component="LandingPage"] [class*="_cardTilt_"]:nth-child(even) [class*="_card_"]:is(:hover,:has(:focus-visible)) { transform:translateY(-10px) rotate(1.4deg) scale(1.035)!important }
[data-component="LandingPage"] [class*="_card_"]:is(:hover,:has(:focus-visible))::after { opacity:1; transform:scale(1) }
[data-component="LandingPage"] [class*="_card_"]:is(:hover,:has(:focus-visible)) [class*="_cardBtn_"] { animation:batBob 2.4s ease-in-out .45s infinite }
[data-component="LandingPage"] [class*="_card_"]:is(:hover,:has(:focus-visible)) [class*="_cardImage_"] img { transform:scale(1.08); filter:saturate(1.08) contrast(1.05) }
[data-component="LandingPage"] [class*="_card_"]:is(:hover,:has(:focus-visible)) [class*="_cardImage_"]::after { opacity:1; animation:batShine .9s ease-out .12s both }
[data-component="LandingPage"] [class*="_card_"]:active {
  transform:translateY(2px) rotate(0) scale(.945,.955)!important; transition-duration:.1s, .2s!important;
  filter:drop-shadow(0 4px 8px #000c) drop-shadow(0 0 18px var(--glow));
}
[data-component="LandingPage"] [class*="_card_"]:active::after { transform:scale(1.1) }
@media (prefers-reduced-motion:reduce) {
  [data-component="LandingPage"] [class*="_card_"],[data-component="LandingPage"] [class*="_card_"] * { animation:none!important; transition-duration:.01s!important }
  [data-component="LandingPage"] [class*="_card_"]:is(:hover,:has(:focus-visible)) { transform:translateY(-4px)!important }
}

/* ---------- chat messages ---------- */
[data-component="MinimalMessage"] [class*="_bubble_"] { border-radius:16px!important; border:1px solid #3C4755!important; box-shadow:0 6px 18px #0005!important }
[data-component="MinimalMessage"][data-part="character"] [class*="_bubble_"] { background:linear-gradient(150deg,#3C4755f2,#2a3440f2 60%,#211718f2)!important; border-color:#637687!important; box-shadow:inset 0 3px 0 #C5B1A6, 0 6px 18px #0005!important }
[data-component="MinimalMessage"][data-part="user"] [class*="_bubble_"] { background:linear-gradient(150deg,#4a0b0ef2,#2c1214f2 55%,#211718f2)!important; border-color:#B00303!important; box-shadow:inset 0 3px 0 #B00303, 0 6px 18px #0005!important }
[data-component="MinimalMessage"] [class*="_name_"] { font-family:var(--bat-display)!important; font-weight:800!important; letter-spacing:.06em!important; text-transform:uppercase; color:var(--bat-charm)!important }
[data-component="MinimalMessage"] [class*="_nameUser_"] { color:var(--bat-rose)!important }
[data-component="MinimalMessage"] [class*="_metaPill_"] { color:var(--bat-mist)!important; background:#0f131866!important; border-radius:999px!important; padding:1px 9px!important }
[data-component="MinimalMessage"] [class*="_prose_"] { color:var(--lumiverse-text)!important; font-size:15.5px; line-height:1.7 }
[data-component="MinimalMessage"] [class*="_prose_"] blockquote { border-left:3px solid var(--bat-red)!important; background:#ffffff08; padding:4px 12px; border-radius:0 8px 8px 0 }
[data-component="MinimalMessage"] [class*="_prose_"] a { text-decoration-color:#ee8b8266 }
[data-component="MinimalMessage"] [class*="_prose_"] hr { border:0; border-top:1px dashed #637687aa }
[data-component="MinimalMessage"] [class*="_indicator_"] { background:#211718!important; border:1px solid #3C4755!important; color:var(--bat-charm)!important; border-radius:999px!important }
[data-component="MinimalMessage"] [class*="_badge_"] { background:var(--bat-red)!important; color:#fff!important }

/* avatars with little bat ears */
[data-component="MinimalMessage"] [class*="_avatar_"] { position:relative!important; overflow:visible!important; border:2px solid #C5B1A6!important; border-radius:14px!important; box-shadow:0 4px 12px #0007 }
[data-component="MinimalMessage"] [class*="_avatar_"]>div { border-radius:12px!important; overflow:hidden!important }
[data-component="MinimalMessage"][data-part="character"] [class*="_avatar_"]::before,
[data-component="MinimalMessage"][data-part="character"] [class*="_avatar_"]::after {
  content:""; position:absolute; top:-9px; width:15px; height:15px; background:#3C4755; border:2px solid #C5B1A6; border-bottom:0;
  border-radius:60% 60% 0 0; z-index:-1;
}
[data-component="MinimalMessage"][data-part="character"] [class*="_avatar_"]::before { left:3px; transform:rotate(-14deg) }
[data-component="MinimalMessage"][data-part="character"] [class*="_avatar_"]::after { right:3px; transform:rotate(14deg) }
[data-component="MinimalMessage"] [class*="_actions_"] [class*="_btn_"] { color:var(--bat-charm)!important }
[data-component="MinimalMessage"] [class*="_actions_"] [class*="_btn_"]:hover { background:#B0030326!important; color:var(--bat-red-text)!important }
[data-component="MinimalMessage"] [class*="_btnDangerGhost_"]:hover { background:#f4766a26!important; color:#f4766a!important }

/* ---------- chat toolbars ---------- */
[data-component="ChatView"] [class*="_toolbarBtn_"] { background:#3C4755dd!important; border:1px solid #637687!important; color:var(--bat-bone)!important; border-radius:10px!important }
[data-component="ChatView"] [class*="_toolbarBtn_"]:hover,
[data-component="ChatView"] [class*="_toolbarBtn_"][aria-pressed="true"] { border-color:var(--bat-red)!important; color:var(--bat-red-text)!important; background:#B0030320!important }

/* ---------- composer: BELL-TOWER bar ----------
 * Frame = 9-slice border-image (assets/composer-frame.svg), so it stretches to any width without distorting the corners.
 * Ornaments hang off pseudo-elements; every one is pointer-events:none. Tuning knobs are the --bf-* vars below. */
[data-component="InputArea"] {
  --bf-cat-w: 108px;         /* width of the bat-duo mascot on the left (also sets left padding) */
  --bf-wings-w: 132px;       /* wingspan behind the send button */
  --bf-send: 52px;           /* send button diameter */
  --bf-glow: #ff8a3d;        /* candlelight accent */
  position:relative!important; isolation:isolate; box-sizing:border-box!important;
  margin-top:22px!important; min-height:136px;
  padding:25px 56px 21px calc(var(--bf-cat-w) + 28px)!important;
  background:none!important; border:0!important; border-radius:0!important; box-shadow:none!important;
}
[data-component="InputArea"] [class*="_actionBar_"],
[data-component="InputArea"] [class*="_inputRow_"],
[data-component="InputArea"] [class*="_sendBtnShell_"] { position:static }
[data-component="InputArea"] [class*="_sendBtnShell_"] { position:relative!important; flex:none!important; margin-left:calc((var(--bf-wings-w) - var(--bf-send)) / 2 - 2px)!important }

/* frame */
[data-component="InputArea"]::before {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; box-sizing:border-box;
  border:56px solid transparent; border-image:url("assets/composer-frame.svg") 56 fill / 56px / 0 stretch;
  filter:drop-shadow(0 8px 16px #000a) drop-shadow(0 0 10px #b003031f);
}
/* flock flying over the top-right corner */
[data-component="InputArea"]::after {
  content:""; position:absolute; z-index:4; pointer-events:none; right:10px; top:-30px; width:124px; height:58px;
  background:url("assets/composer-bat-flock.svg") center/contain no-repeat;
  animation:bf-drift 6s ease-in-out infinite;
}
@keyframes bf-drift { 0%,100%{ transform:translate(0,0) } 50%{ transform:translate(-5px,3px) } }
/* cobweb in the top-left corner */
[data-component="InputArea"] [class*="_actionBar_"]::after {
  content:""; position:absolute; z-index:2; pointer-events:none; left:15px; top:15px; width:64px; height:64px;
  background:url("assets/composer-cobweb.svg") 0 0/contain no-repeat;
}
/* the kawaii bat duo, resting on the bottom rule */
[data-component="InputArea"] [class*="_actionBar_"]::before {
  content:""; position:absolute; z-index:3; pointer-events:none; left:12px; bottom:21px; width:var(--bf-cat-w); height:var(--bf-cat-w);
  background:url("assets/composer-bat-duo.svg") center bottom/contain no-repeat;
  filter:drop-shadow(0 0 3px #b9a6d899) drop-shadow(0 0 9px #8a6cc033);
}
/* three sleepers on the empty top-right stretch of the toolbar */
[data-component="InputArea"] [class*="_inputRow_"]::before {
  content:""; position:absolute; z-index:1; pointer-events:none; right:158px; top:11px; width:150px; height:56px;
  background:url("assets/composer-hanging-bats.svg") center top/contain no-repeat;
}
/* moon & stars straddling the bottom rule */
[data-component="InputArea"] [class*="_inputRow_"]::after {
  content:""; position:absolute; z-index:3; pointer-events:none; left:44%; bottom:-9px; width:76px; height:27px;
  background:url("assets/composer-moon-stars.svg") center/contain no-repeat; filter:drop-shadow(0 0 5px #140d0e);
}

/* toolbar buttons (sit above the sleeping bats) */
[data-component="InputArea"] :is([class*="_actionBtn_"],[class*="_actionDivider_"]) { position:relative; z-index:4 }
[data-component="InputArea"] [class*="_actionBar_"] { position:static!important; margin-bottom:6px!important; padding-left:0!important }
[data-component="InputArea"] [class*="_actionDivider_"] {
  width:18px!important; height:12px!important; border:0!important; background:url("assets/composer-divider-bat.svg") center/contain no-repeat!important; opacity:.9; margin:0 4px!important;
}
[data-component="InputArea"] :is([class*="_actionBtn_"],[class*="_attachBtn_"]) { color:var(--bat-charm)!important; border-radius:50%!important; transition:color .15s, background .15s, box-shadow .15s }
[data-component="InputArea"] :is([class*="_actionBtn_"],[class*="_attachBtn_"]):hover:not(:disabled) { background:#b0030326!important; color:var(--bat-red-text)!important; box-shadow:inset 0 0 0 1px #b0030366 }
[data-component="InputArea"] [class*="_attachBtn_"]:disabled { opacity:.4 }
[data-component="InputArea"] [class*="_actionBtnHasSelection_"],
[data-component="InputArea"] [class*="_actionBtnActive_"] { color:var(--bat-red-text)!important; background:#b003031f!important }
[data-component="InputArea"] [class*="_badge_"] { background:var(--bat-red)!important; color:#fff!important; box-shadow:0 0 0 1.5px #140d0e }

/* text field with bat ears */
[data-component="InputArea"] [class*="_inputWrapper_"] {
  position:relative!important; overflow:visible!important;
  background:linear-gradient(170deg,#0f0a0c,#1a1013 70%,#240d11)!important;
  border:1.5px solid #C5B1A6b3!important; border-radius:28px!important;
  box-shadow:inset 0 0 0 1px #b003034d, inset 0 6px 14px #0008, 0 0 0 1px #0008!important;
  transition:border-color .2s, box-shadow .2s;
}
[data-component="InputArea"] [class*="_inputWrapper_"]:focus-within {
  border-color:var(--bat-ember)!important;
  box-shadow:inset 0 0 0 1px #b0030388, inset 0 6px 14px #0008, 0 0 18px #ff6a5c55!important;
}
[data-component="InputArea"] [class*="_inputWrapper_"]::before,
[data-component="InputArea"] [class*="_inputWrapper_"]::after {
  content:""; position:absolute; z-index:-1; pointer-events:none; top:-22px; width:36px; height:28px;
  background:url("assets/composer-bat-ear.svg") center/100% 100% no-repeat;
}
[data-component="InputArea"] [class*="_inputWrapper_"]::before { left:40px }
[data-component="InputArea"] [class*="_inputWrapper_"]::after { right:40px; transform:scaleX(-1) }
[data-component="InputArea"] :is(textarea[name="chat-message"],[class*="_textareaMirror_"]) { font-family:var(--bat-sans)!important; line-height:1.6!important; padding-left:20px!important; padding-right:20px!important }
[data-component="InputArea"] textarea[name="chat-message"] { color:var(--bat-cream)!important; caret-color:var(--bat-ember)!important; background:transparent!important }
[data-component="InputArea"] textarea[name="chat-message"]::placeholder { color:#94857d!important; font-family:var(--bat-display)!important; font-style:normal; font-size:1.1em; letter-spacing:.05em; opacity:1 }

/* send: a blood moon with wings tucked behind it */
[data-component="InputArea"] [class*="_sendBtnShell_"]::before {
  content:""; position:absolute; z-index:0; pointer-events:none; left:50%; top:50%; width:var(--bf-wings-w); height:calc(var(--bf-wings-w) * .39);
  transform:translate(-50%,-50%); background:url("assets/composer-send-wings.svg") center/100% 100% no-repeat; filter:drop-shadow(0 3px 5px #000a);
  transition:transform .25s ease;
}
[data-component="InputArea"] [class*="_sendBtnShell_"]:hover::before { transform:translate(-50%,-54%) scaleY(1.12) }
[data-component="InputArea"] [class*="_sendBtn_"] {
  position:relative!important; z-index:1!important; width:var(--bf-send)!important; height:var(--bf-send)!important; border:0!important; border-radius:50%!important; padding:0!important;
  background:url("assets/composer-blood-moon.svg") center/100% 100% no-repeat!important; color:#fff!important;
  box-shadow:0 0 18px #b0030399, 0 0 34px #ff6a5c33!important; filter:none;
}
[data-component="InputArea"] [class*="_sendBtn_"]:hover { filter:brightness(1.15) saturate(1.1) }
[data-component="InputArea"] [class*="_sendBtn_"] svg { filter:drop-shadow(0 1px 2px #4a0b0e) }
[data-component="InputArea"] [class*="_sendBtnStop_"] { background:#3C4755!important; box-shadow:none!important }

@media (prefers-reduced-motion:reduce) {
  [data-component="InputArea"]::after { animation:none!important }
}
@media (max-width:1100px) {
  [data-component="InputArea"] [class*="_inputRow_"]::before { display:none }
}
@media (max-width:640px) {
  [data-component="InputArea"] { --bf-cat-w:0px; --bf-wings-w:0px; margin-top:14px!important; min-height:0; padding:22px 18px 18px!important }
  [data-component="InputArea"]::before { border-width:34px; border-image-width:34px }
  [data-component="InputArea"] [class*="_actionBar_"]::before,
  [data-component="InputArea"] [class*="_actionBar_"]::after,
  [data-component="InputArea"] [class*="_sendBtnShell_"]::before,
  [data-component="InputArea"] [class*="_inputRow_"]::after { display:none }
  [data-component="InputArea"]::after { width:78px; height:37px; top:-20px; right:8px }
  [data-component="InputArea"] [class*="_sendBtnShell_"] { margin-left:0!important }
  [data-component="InputArea"] { --bf-send:44px }
}


/* ---------- composer popovers (persona / connection / tools / extras / impersonate …) ----------
 * The bell-tower bar has a fixed-size frame and ornaments, so a panel that tries to grow *inside* it ends up
 * hanging over the input row. Here the panel floats directly above the bar instead, always fully visible,
 * aligned with the toolbar, and scrolling inside itself when it is tall. */
[data-component="InputArea"] [class*="_popoverSlot_"] {
  position:absolute!important; top:auto!important; bottom:calc(100% + 8px)!important;
  left:calc(var(--bf-cat-w) + 28px)!important; right:56px!important; width:auto!important;
  height:auto!important; min-height:0!important; max-height:none!important; margin:0!important;
  display:block!important; overflow:visible!important; transform:none!important; contain:none!important;
  z-index:60!important; pointer-events:none!important;
}
[data-component="InputArea"] [class*="_popoverSlotInner_"] {
  position:relative!important; inset:auto!important; transform:none!important; height:auto!important; min-height:0!important;
  max-height:min(58vh,480px)!important; overflow:hidden auto!important; overscroll-behavior:contain; contain:none!important;
  border-radius:16px; pointer-events:auto!important; box-shadow:0 -10px 34px #000b,0 0 0 1px #3C4755;
}
[data-component="InputArea"] [class*="_popoverSlotInner_"]:empty { box-shadow:none; pointer-events:none!important }
[data-component="InputArea"] [class*="_popoverSlotInner_"]>*,
[data-component="InputArea"] [class*="_popoverSlotInner_"]>*>:is([class*="menu" i],[class*="panel" i],[class*="popover" i],[class*="dropdown" i],[class*="list" i],[role="menu"],[role="dialog"],[role="listbox"]) {
  position:relative!important; inset:auto!important; transform:none!important; width:auto!important; max-width:100%!important; margin-left:0!important; margin-right:0!important; box-sizing:border-box;
}
@media (max-width:700px) {
  [data-component="InputArea"] [class*="_popoverSlot_"] { left:12px!important; right:12px!important }
}

/* ---------- dialogs, drawers, menus ---------- */
:is([role="dialog"],[class*="_modal_"],[class*="_drawer_"],[class*="_dialog_"]) { border-color:#3C4755!important }

/* ---------- chat selector / modal decor (v12) ----------
 * Dashed inner frame + red corner studs, cobweb, hanging bats. Drawn with the modal's own
 * background/outline so no positioning or layout is touched. */
:is([role="dialog"],[class*="_modal_"]):not([data-component="InputArea"] *) {
  outline:1.5px dashed #8b97a8b3!important; outline-offset:-9px!important;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 .6 9.4 5 5 9.4.6 5Z' fill='%23c4191c' stroke='%232a1618' stroke-width='1'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 .6 9.4 5 5 9.4.6 5Z' fill='%23c4191c' stroke='%232a1618' stroke-width='1'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 .6 9.4 5 5 9.4.6 5Z' fill='%23c4191c' stroke='%232a1618' stroke-width='1'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 .6 9.4 5 5 9.4.6 5Z' fill='%23c4191c' stroke='%232a1618' stroke-width='1'/%3E%3C/svg%3E"),
    url("assets/composer-cobweb.svg"),
    url("assets/hdr-hanging-bats.png"),
    var(--lumiverse-gradient-modal)!important;
  background-size:10px 10px,10px 10px,10px 10px,10px 10px,84px 84px,118px auto,auto!important;
  background-position:left 11px top 11px,right 11px top 11px,left 11px bottom 11px,right 11px bottom 11px,left 10px top 10px,right 84px top 0,0 0!important;
  background-repeat:no-repeat!important;
}
@media (max-width:560px) {
  :is([role="dialog"],[class*="_modal_"]):not([data-component="InputArea"] *) { background-size:10px 10px,10px 10px,10px 10px,10px 10px,60px 60px,84px auto,auto!important; background-position:left 11px top 11px,right 11px top 11px,left 11px bottom 11px,right 11px bottom 11px,left 10px top 10px,right 64px top 0,0 0!important }
}
[role="tab"][aria-selected="true"],[class*="_tabBtn_"][aria-selected="true"] { color:var(--bat-red-text)!important; border-color:var(--bat-red)!important }
[class*="_toast_"] { background:#211718!important; border:1px solid #3C4755!important; border-left:3px solid var(--bat-red)!important; color:var(--bat-cream)!important }
input:focus-visible,textarea:focus-visible,button:focus-visible,[tabindex]:focus-visible { outline:2px solid #ee8b8299!important; outline-offset:2px }
input[type="checkbox"],input[type="radio"],input[type="range"] { accent-color:#c4191c }

/* ---------- Response Instructions extension panel ---------- */
#ri-panel .ri-chip.ri-on,#ri-panel .ri-mode-tab.ri-on { background:#B0030333!important; border-color:#B0030399!important; color:var(--bat-red-text)!important }

/* ---------- small screens ---------- */
@media (max-width:640px){
  [data-component="LandingPage"] [class*="_cardName_"] { font-size:11px!important }
  [data-component="LandingPageHeader"] h1 { letter-spacing:.08em!important }
}

/* ---------- display font on headings and titles ---------- */
:is(h1,h2,h3,h4,[class*="_title_"],[class*="_heading_"],[class*="_modalTitle_"],[class*="_sectionTitle_"],[class*="_panelTitle_"]) {
  font-family:var(--bat-display)!important; font-weight:400!important; font-synthesis:none; letter-spacing:.05em;
}

/* ---------- messages: bat divider + Devil Candle name (nothing else is changed) ---------- */
:root:root [data-item-type="message"]>div:not([data-spindle-mount])>div>[class*="header" i] { position:relative!important; padding-bottom:16px!important; margin-bottom:4px!important }
/* full-width divider: fading line | bat ornament | fading line */
:root:root [data-item-type="message"]>div:not([data-spindle-mount])>div>[class*="header" i]::after {
  content:""; position:absolute; left:0; right:0; width:auto; bottom:0; height:16px; pointer-events:none;
  background:
    url("assets/msg-flourish-center.svg") center / 160px 16px no-repeat,
    linear-gradient(90deg,#cdbfe600,#cdbfe6c0) left center / calc(50% - 84px) 1.6px no-repeat,
    linear-gradient(90deg,#cdbfe6c0,#cdbfe600) right center / calc(50% - 84px) 1.6px no-repeat;
}
:root:root :is([data-item-type="message"]>div:not([data-spindle-mount])>div>[class*="header" i]>:first-child, [data-item-type="message"]>div:not([data-spindle-mount])>div>[class*="header" i] [class*="name" i]:not(:has(*))) {
  font-family:"Devil Candle","Playfair Display",Georgia,serif!important; font-weight:400!important; font-style:normal!important; font-synthesis:none;
  font-size:26px!important; line-height:1.05!important; letter-spacing:.05em!important;
}