/* Zuno 0.23 */

/* ======================= chat theme scenes ======================= */
.chat.has-scene { position: relative; isolation: isolate; }
.chat.has-scene::before { display: none !important; }
.chat.has-scene .messages, .ct-preview .ct-b { position: relative; }
.chat.has-scene .messages { background: transparent; }
.ct-scene { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: var(--bg); contain: strict; }
.ct-scene i { position: absolute; left: var(--x); top: var(--y); display: block; will-change: transform, opacity; animation-delay: var(--d); animation-duration: var(--t); animation-iteration-count: infinite; animation-timing-function: linear; }
.reduce-motion .ct-scene i, .reduce-motion .ct-scene::before, .reduce-motion .ct-scene::after { animation-play-state: paused !important; }
@media not all /* (0.38) animations follow Zuno's own Reduce Motion switch only */ { .ct-scene i, .ct-scene::before, .ct-scene::after { animation-play-state: paused !important; } }

/* Ocean: bubbles drifting up */
.sc-bubbles i { top: 105%; width: calc(14px * var(--s)); height: calc(14px * var(--s)); border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--c) 70%, transparent); background: radial-gradient(circle at 30% 30%, #fff8, transparent 45%); animation-name: sc-rise; }
.sc-bubbles::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(100deg, transparent 0 40px, #9fd3ff0a 40px 70px); animation: sc-caustic 18s ease-in-out infinite alternate; }
@keyframes sc-rise { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: .8; } 50% { transform: translate(18px, -55vh); } 100% { transform: translate(-10px, -115vh); opacity: 0; } }
@keyframes sc-caustic { to { transform: translateX(60px); } }
/* Sunset: a low sun and slow clouds */
.sc-sky::before { content: ''; position: absolute; left: 50%; bottom: -12%; width: 46vmin; height: 46vmin; margin-left: -23vmin; border-radius: 50%; background: radial-gradient(circle, #ffe0a3, #ff9a4d 45%, transparent 70%); opacity: .8; animation: sc-sun 12s ease-in-out infinite alternate; }
.sc-sky i { width: calc(220px * var(--s)); height: calc(60px * var(--s)); top: calc(var(--y) * .6); border-radius: 50%; background: radial-gradient(ellipse, color-mix(in srgb, var(--c) 35%, transparent), transparent 70%); filter: blur(6px); animation-name: sc-drift; animation-duration: calc(var(--t) * 4); }
@keyframes sc-sun { to { transform: translateY(-14px) scale(1.04); } }
@keyframes sc-drift { from { transform: translateX(-30vw); } to { transform: translateX(110vw); } }
/* Forest: fireflies over dark hills */
.sc-fireflies::after { content: ''; position: absolute; inset: auto 0 0; height: 35%; background: radial-gradient(ellipse 60% 100% at 20% 100%, #0e2a1b, transparent 70%), radial-gradient(ellipse 70% 90% at 80% 100%, #0b2416, transparent 70%); }
.sc-fireflies i { width: 4px; height: 4px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px 2px var(--c); animation-name: sc-firefly; animation-timing-function: ease-in-out; animation-direction: alternate; }
@keyframes sc-firefly { 0% { transform: translate(0, 0); opacity: 0; } 30% { opacity: 1; } 60% { opacity: .2; } 100% { transform: translate(calc(60px * var(--s)), calc(-50px * var(--s))); opacity: .9; } }
/* Galaxy & Midnight: twinkling stars and a shooting star now and then */
.sc-stars i { width: calc(3px * var(--s)); height: calc(3px * var(--s)); border-radius: 50%; background: var(--c); box-shadow: 0 0 4px var(--c); animation-name: sc-twinkle; animation-duration: calc(var(--t) / 3); animation-timing-function: ease-in-out; }
.sc-stars::after { content: ''; position: absolute; top: 12%; left: -10%; width: 120px; height: 2px; background: linear-gradient(90deg, transparent, #fff); border-radius: 2px; transform: rotate(18deg); animation: sc-shoot 9s ease-in infinite 3s; opacity: 0; }
@keyframes sc-twinkle { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.2); } }
@keyframes sc-shoot { 0% { transform: translate(0, 0) rotate(18deg); opacity: 0; } 2% { opacity: 1; } 9% { transform: translate(70vw, 23vw) rotate(18deg); opacity: 0; } 100% { opacity: 0; } }
/* Sakura & Rose: petals falling and turning */
.sc-petals i { top: -6%; width: calc(14px * var(--s)); height: calc(10px * var(--s)); border-radius: 80% 10% 80% 10%; background: var(--c); opacity: .85; animation-name: sc-petal; animation-timing-function: ease-in-out; }
@keyframes sc-petal { 0% { transform: translate(0, 0) rotate(var(--r)); } 25% { transform: translate(40px, 28vh) rotate(calc(var(--r) + 90deg)); } 50% { transform: translate(-20px, 55vh) rotate(calc(var(--r) + 180deg)); } 75% { transform: translate(30px, 82vh) rotate(calc(var(--r) + 270deg)); } 100% { transform: translate(0, 112vh) rotate(calc(var(--r) + 360deg)); } }
/* Lava lamp: big soft blobs rising and sinking */
.sc-blobs { filter: saturate(1.2); }
.sc-blobs i { width: calc(260px * var(--s)); height: calc(260px * var(--s)); margin: -130px 0 0 -130px; border-radius: 45% 55% 50% 50%; background: radial-gradient(circle at 40% 40%, var(--c), transparent 70%); filter: blur(30px); opacity: .55; animation-name: sc-blob; animation-duration: calc(var(--t) * 2); animation-timing-function: ease-in-out; animation-direction: alternate; }
@keyframes sc-blob { from { transform: translate(0, 30vh) scale(.8); } to { transform: translate(40px, -30vh) scale(1.2); } }
/* Neon: a glowing grid floor sliding toward you */
.sc-grid::before { content: ''; position: absolute; left: -50%; right: -50%; bottom: -10%; height: 70%; background: linear-gradient(var(--c0) 2px, transparent 2px) 0 0 / 60px 60px, linear-gradient(90deg, var(--c1) 2px, transparent 2px) 0 0 / 60px 60px; opacity: .35; transform: perspective(300px) rotateX(62deg); transform-origin: 50% 100%; animation: sc-gridmove 2.4s linear infinite; mask-image: linear-gradient(transparent, #000 70%); -webkit-mask-image: linear-gradient(transparent, #000 70%); }
.sc-grid::after { content: ''; position: absolute; left: 50%; top: 18%; width: 34vmin; height: 34vmin; margin-left: -17vmin; border-radius: 50%; background: linear-gradient(180deg, #ffd23b, var(--c0)); opacity: .45; mask-image: repeating-linear-gradient(180deg, #000 0 10px, transparent 10px 14px); -webkit-mask-image: repeating-linear-gradient(180deg, #000 0 10px, transparent 10px 14px); }
@keyframes sc-gridmove { to { background-position: 0 60px, 0 0; } }
/* Terminal: scanlines and a soft green glow */
.sc-scan::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, #33ff8808 0 2px, transparent 2px 4px); }
.sc-scan::after { content: ''; position: absolute; left: 0; right: 0; height: 30%; background: linear-gradient(transparent, #33ff8812, transparent); animation: sc-scanline 6s linear infinite; }
@keyframes sc-scanline { from { top: -30%; } to { top: 100%; } }
/* Lemonade: slow sun rays */
.sc-rays::before { content: ''; position: absolute; left: 50%; top: -60%; width: 220%; aspect-ratio: 1; margin-left: -110%; background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--c0) 14%, transparent) 0 8deg, transparent 8deg 20deg); animation: sc-spin 80s linear infinite; }
@keyframes sc-spin { to { transform: rotate(360deg); } }
/* Aurora & Mint: shimmering bands */
.sc-aurora i { left: -20%; width: 140%; height: 40%; top: calc(var(--y) * .5); border-radius: 50%; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c) 45%, transparent), transparent); filter: blur(28px); opacity: .7; animation-name: sc-aurora; animation-duration: calc(var(--t) * 1.5); animation-timing-function: ease-in-out; animation-direction: alternate; }
@keyframes sc-aurora { from { transform: translateX(-12%) skewY(-6deg) scaleY(.8); } to { transform: translateX(12%) skewY(6deg) scaleY(1.2); } }
/* Dreamy & Grape: soft floating orbs */
.sc-orbs i { width: calc(180px * var(--s)); height: calc(180px * var(--s)); border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c) 45%, transparent), transparent 70%); filter: blur(10px); animation-name: sc-orb; animation-duration: calc(var(--t) * 1.6); animation-timing-function: ease-in-out; animation-direction: alternate; }
@keyframes sc-orb { from { transform: translate(-30px, 20px) scale(.9); } to { transform: translate(40px, -40px) scale(1.15); } }
/* Winter: snow */
.sc-snow i { top: -4%; width: calc(6px * var(--s)); height: calc(6px * var(--s)); border-radius: 50%; background: var(--c); opacity: calc(.3 + var(--s) * .5); animation-name: sc-snow; }
@keyframes sc-snow { 0% { transform: translate(0, 0); } 50% { transform: translate(25px, 55vh); } 100% { transform: translate(-10px, 110vh); } }
/* Love: hearts floating up */
.sc-hearts i { top: 105%; width: calc(16px * var(--s)); height: calc(16px * var(--s)); background: var(--c); transform: rotate(45deg); opacity: .6; animation-name: sc-heart; }
.sc-hearts i::before, .sc-hearts i::after { content: ''; position: absolute; width: 100%; height: 100%; border-radius: 50%; background: inherit; }
.sc-hearts i::before { left: -50%; } .sc-hearts i::after { top: -50%; }
@keyframes sc-heart { 0% { transform: translate(0, 0) rotate(45deg) scale(.6); opacity: 0; } 15% { opacity: .7; } 100% { transform: translate(30px, -115vh) rotate(45deg) scale(1.1); opacity: 0; } }
/* Coffee: steam curling up */
.sc-steam i { top: auto; bottom: -10%; width: calc(40px * var(--s)); height: 40%; border-radius: 50%; background: radial-gradient(ellipse, color-mix(in srgb, var(--c) 18%, transparent), transparent 70%); filter: blur(8px); animation-name: sc-steam; animation-timing-function: ease-in-out; }
@keyframes sc-steam { 0% { transform: translate(0, 0) scaleX(1); opacity: 0; } 30% { opacity: .9; } 100% { transform: translate(30px, -80vh) scaleX(2.5); opacity: 0; } }
/* Candy: sprinkles */
.sc-sprinkles i { top: -4%; width: calc(4px * var(--s) + 2px); height: calc(12px * var(--s) + 4px); border-radius: 4px; background: var(--c); opacity: .7; animation-name: sc-petal; }
/* Mono: film grain */
.sc-grain::before { content: ''; position: absolute; inset: -50%; background-image: radial-gradient(#ffffff14 1px, transparent 1px); background-size: 3px 3px; animation: sc-grain 1s steps(6) infinite; }
@keyframes sc-grain { 0% { transform: translate(0, 0); } 33% { transform: translate(-6px, 4px); } 66% { transform: translate(5px, -3px); } 100% { transform: translate(0, 0); } }

/* ======================= themed chats: bubbles, top bar, message box ======================= */
html[data-msgstyle="bubbles"] #main.chat-themed .msg.mine .content, .ct-preview .ct-b.me { background: var(--bubble-me); color: var(--bubble-me-text, #fff); box-shadow: 0 2px 10px color-mix(in srgb, var(--brand) 25%, transparent); }
html[data-msgstyle="bubbles"] #main.chat-themed .msg:not(.mine) .content, .ct-preview .ct-b.them { background: var(--bubble-them); }
#main.chat-themed .msg.mine .content a { color: inherit; text-decoration: underline; }
#main.chat-themed .topbar { background: color-mix(in srgb, var(--brand) 9%, var(--main)); box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--brand) 30%, transparent); }
#main.chat-themed .composer-box { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--brand) 45%, transparent), 0 8px 24px rgba(0,0,0,.3) !important; background: color-mix(in srgb, var(--brand) 6%, var(--input)) !important; }
#main.chat-themed .composer-send.ready { background: var(--brand); }
/* glass: frosted bubbles */
html[data-msgstyle="bubbles"] #main.cst-glass .msg .content, .ct-preview.cst-glass .ct-b { backdrop-filter: blur(8px) saturate(1.3); -webkit-backdrop-filter: blur(8px) saturate(1.3); }
html[data-msgstyle="bubbles"] #main.cst-glass .msg:not(.mine) .content, .ct-preview.cst-glass .ct-b.them { box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
/* glow: neon outlines */
html[data-msgstyle="bubbles"] #main.cst-glow .msg.mine .content, .ct-preview.cst-glow .ct-b.me { box-shadow: 0 0 0 1px #ff2bd6aa, 0 0 14px #ff2bd666; }
html[data-msgstyle="bubbles"] #main.cst-glow .msg:not(.mine) .content, .ct-preview.cst-glow .ct-b.them { box-shadow: 0 0 0 1px #00f0ff88, 0 0 12px #00f0ff44; }
#main.cst-glow .msg .content { text-shadow: 0 0 8px rgba(255,255,255,.25); }
/* term: a terminal */
#main.cst-term .msg .content, .ct-preview.cst-term .ct-b { font-family: ui-monospace, 'Cascadia Code', Menlo, Consolas, monospace !important; border-radius: 4px !important; }
html[data-msgstyle="bubbles"] #main.cst-term .msg .content, .ct-preview.cst-term .ct-b { box-shadow: inset 0 0 0 1px #33ff8844 !important; color: #a8ffcb; }
#main.cst-term .msg.mine .content::before, .ct-preview.cst-term .ct-b.me::before { content: '> '; color: #33ff88; }
#main.cst-term .composer-box textarea { font-family: ui-monospace, Menlo, Consolas, monospace; color: #a8ffcb; }
/* soft: extra-round pills */
html[data-msgstyle="bubbles"] #main.cst-soft .msg .content, .ct-preview.cst-soft .ct-b { border-radius: 22px !important; }
/* mono: crisp, flat */
html[data-msgstyle="bubbles"] #main.cst-mono .msg .content, .ct-preview.cst-mono .ct-b { border-radius: 10px !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) !important; }

/* The burst of emoji when you send */
.ct-fx { position: fixed; z-index: 400; pointer-events: none; font-size: 20px; animation: ct-fx 1.1s cubic-bezier(.2,.7,.3,1) both; }
@keyframes ct-fx { 0% { transform: translate(0, 0) scale(.4); opacity: 0; } 15% { opacity: 1; transform: translate(calc(var(--dx) * .15), calc(var(--dy) * .15)) scale(1.1); } 100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(.9); opacity: 0; } }

/* ======================= the theme picker ======================= */
.ct-picker { width: 600px; }
.ct-preview { position: relative; height: 170px; overflow: hidden; isolation: isolate; border-radius: 16px; padding: 18px; gap: 8px; }
.ct-pscene { position: absolute; inset: 0; z-index: -1; }
.ct-preview .ct-scene { position: absolute; }
.ct-preview .ct-wall { z-index: -1; }
.ct-preview .ct-b { max-width: 72%; }
.ct-themes { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }
.ct-sw i { position: relative; width: 64px; height: 46px; border-radius: 12px; background: var(--bg) !important; overflow: hidden; display: block; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.ct-sw i b { position: absolute; height: 9px; border-radius: 6px; }
.ct-sw .ct-mini-t { left: 6px; top: 8px; width: 30px; background: var(--t); }
.ct-sw .ct-mini-m { right: 6px; top: 21px; width: 34px; background: var(--m); }
.ct-sw i em { position: absolute; left: 6px; bottom: 3px; font-style: normal; font-size: 13px; }
.ct-default i { background: var(--main) !important; }
@media (max-width: 760px) { .ct-picker { width: auto; } .ct-preview { height: 150px; } }

/* ======================= encryption offer ======================= */
.e2e-offer { margin: 14px 16px 6px; padding: 14px 16px; border-radius: 14px; background: color-mix(in srgb, var(--brand) 10%, var(--sidebar)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 35%, transparent); display: flex; gap: 12px; align-items: flex-start; animation: msg-in .3s var(--ease-out); }
.e2e-offer .eo-ico { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--brand) 25%, transparent); color: var(--brand); }
.e2e-offer .eo-ico svg { width: 18px; height: 18px; }
.e2e-offer b { color: var(--header); }
.e2e-offer p { margin: 2px 0 10px; color: var(--muted); font-size: 13px; }
.e2e-offer .eo-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ======================= search: from:@name ======================= */
.from-chip { display: inline-flex; align-items: center; gap: 4px; flex: none; padding: 1px 4px 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--brand) 22%, transparent); color: var(--header); font-size: 12px; font-weight: 600; white-space: nowrap; }
.from-chip button { width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; color: var(--muted); }
.from-chip button:hover { background: rgba(255,255,255,.12); color: var(--text); }
.tb-search:has(.from-chip) { width: 260px !important; }
.tb-search:has(.from-chip) input { display: block !important; }
.from-pop { position: fixed; z-index: 450; width: 260px; max-height: 300px; overflow-y: auto; padding: 6px; border-radius: 12px; background: var(--floating); box-shadow: 0 12px 30px rgba(0,0,0,.45), 0 0 0 1px var(--border); }
.from-pop .fp-head { padding: 4px 8px 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--muted); }
.from-pop button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border-radius: 8px; text-align: left; }
.from-pop button.sel, .from-pop button:hover { background: var(--hover); }
.from-pop button span { color: var(--muted); font-size: 12px; margin-left: auto; }

/* ======================= reports: encrypted messages & related conversation ======================= */
.rp-e2e { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--brand) 10%, transparent); font-size: 13px; color: var(--text); }
.mod-e2e { font-size: 11px; padding: 1px 6px; border-radius: 6px; background: var(--input); color: var(--muted); }
.mod-e2e.ok { background: color-mix(in srgb, var(--green, #23a55a) 18%, transparent); color: #6fe0a0; }
video.mod-media { max-width: 280px; max-height: 200px; border-radius: 8px; background: #000; display: block; margin-top: 4px; }
.report-context { width: 640px; max-height: calc(100dvh - 40px); display: flex; flex-direction: column; padding: 0 !important; overflow: hidden; }
.rc-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.rc-head h3 { margin: 0; }
.rc-head .icon-btn { margin-left: auto; }
.rc-media { padding: 10px 16px; border-bottom: 1px solid var(--border); }
.rc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 6px; max-height: 200px; overflow-y: auto; }
.rc-tile { aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: #000; }
.rc-tile img, .rc-tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
.rc-thread { overflow-y: auto; padding: 10px 16px 16px; flex: 1; }
.rc-thread .mod-msg.hot { background: color-mix(in srgb, var(--red) 14%, transparent); border-radius: 10px; }
.rc-open { margin-top: 6px; }
.rc-overlay { z-index: 130; }
.report-context { background: var(--sidebar); border-radius: 16px; box-shadow: 0 20px 50px rgba(0,0,0,.5); }

/* 0.23.1: founder-only "delete for good", About Zuno */
.purge-btn { color: var(--red) !important; }
.purge-x { color: var(--muted); width: 28px; height: 28px; flex: none; }
.purge-x:hover { color: var(--red); }
.about-latest ul { margin: 6px 0 0; padding-left: 20px; color: var(--text); line-height: 1.55; }
.about-latest li { margin-bottom: 4px; }