<template>
	<view class="ie-page">
		<view class="ambient ambient-a"></view>
		<view class="ambient ambient-b"></view>
		<view class="top-safe" :style="{ height: menuButtonInfo.top + 'px' }"></view>

		<view class="status-head">
			<view class="time-line">{{ timeLabel }}</view>
			<view class="live-line">此刻有 <text class="count-num">{{ displayAwakeCount }}</text> 个灵魂在线漂流。</view>
			<view class="sub-line">{{ waitingCount }} 个人正在等一句话。</view>
			<view class="archive-entry planet-entry" @tap="openProfile">
				<view class="planet-ring"></view>
				<view class="planet-icon">◌</view>
			</view>
		</view>

		<view class="drift-field">
			<view class="wave-line wave-a"></view>
			<view class="wave-line wave-b"></view>
			<view class="drift-fragment" v-for="(item,index) in driftMessages" :key="item.text"
				:class="['fragment-' + index, item.type, item.mood]" @tap="selectDrift(item)">
				<view class="fragment-dot"></view>
				<view class="fragment-text">{{ item.text }}</view>
				<view class="bubble-actions" v-if="activeDriftText === item.text" @tap.stop>
					<view @tap="replyDrift">回复</view>
					<view @tap="likeDrift">轻轻赞</view>
				</view>
			</view>
			<view class="signal-planet" :style="galaxyStyle" @touchstart.stop="startGalaxyDrag" @touchmove.stop="moveGalaxyDrag"
				@touchend="endGalaxyDrag" @touchcancel="endGalaxyDrag">
				<view class="galaxy-breath">
					<view class="galaxy-ring ring-main"></view>
					<view class="galaxy-ring ring-second"></view>
					<view class="galaxy-ring ring-third"></view>
					<view class="orbit-planet" v-for="(planet,index) in orbitPlanets" :key="planet.name"
						:class="'orbit-planet-' + index" :style="orbitPlanetStyles[index]"></view>
					<view class="galaxy-body">
						<view class="liquid liquid-a"></view>
						<view class="liquid liquid-b"></view>
						<view class="soul-particle soul-a"></view>
						<view class="soul-particle soul-b"></view>
						<view class="soul-particle soul-c"></view>
						<view class="planet-core">
							<view class="planet-text">有人也在等你</view>
							<view class="planet-sub">{{ currentMode === 'i' ? '安静靠近' : '轻轻热闹' }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="mood-dock">
			<view class="dock-title">
				<text>{{ displayMoodCopy }}</text><text class="typing-cursor" v-if="displayMoodCopy.length < activeMood.copy.length"></text>
			</view>
			<scroll-view scroll-x class="dock-scroll" show-scrollbar="false">
				<view class="dock-row">
					<view class="mood-chip" v-for="item in moods" :key="item.key"
						:class="{ active: currentMood === item.key }" @tap="changeMood(item.key)">
						<text class="mood-icon">{{ item.icon }}</text>{{ item.label }}
					</view>
					<view class="mode-switch" @tap="toggleMode">{{ currentMode }} · {{ currentMode === 'i' ? '慢一点' : '亮一点' }}</view>
				</view>
			</scroll-view>
		</view>

		<view class="bottom-actions">
			<view class="tab-glow"></view>
			<view class="bottom-item active"><text class="tab-icon">⌛</text><text>此刻</text></view>
			<view class="bottom-item" @tap="goFate"><text class="tab-icon">⌁</text><text>缘分</text></view>
			<view class="bottom-item" @tap="goMessages"><text class="tab-icon">◔</text><text>消息</text></view>
			<view class="bottom-item" @tap="goUniverse"><text class="tab-icon">♙</text><text>我的</text></view>
		</view>

		<view class="match-mask" v-if="showMatch" @tap="closeMatch">
			<view class="match-panel" @tap.stop>
				<view class="match-top">
					<view class="match-label">半匿名漂流者</view>
					<view class="close" @tap="closeMatch">×</view>
				</view>
				<view class="companion-orb" :class="currentMode">{{ matchedPerson.avatar }}</view>
				<view class="match-name">{{ matchedPerson.name }}</view>
				<view class="match-state">{{ activeMood.label }} · {{ matchedPerson.state }}</view>
				<view class="match-quote">{{ matchedPerson.quote }}</view>
				<view class="match-actions">
					<view class="ghost-btn" @tap="skipMatch">轻轻划过</view>
					<view class="solid-btn" @tap="goChat">进入限时陪伴</view>
				</view>
			</view>
		</view>

		<view class="profile-mask" v-if="showProfile" @tap="closeProfile">
			<view class="profile-mini" @tap.stop>
				<view class="mini-orb">◌</view>
				<view class="mini-title">半匿名漂流者</view>
				<view class="mini-sub">今天更适合：{{ currentMode === 'i' ? '慢一点靠近' : '轻轻热闹一下' }}</view>
				<view class="mini-action" @tap="goUniverse">进入我的宇宙</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menuButtonInfo: { top: 44 },
				currentMood: 'quiet',
				currentMode: 'i',
				chancesLeft: 3,
				showMatch: false,
				now: new Date(),
				awakeCount: 127,
				displayAwakeCount: 0,
				waitingCount: 49,
				liveTimer: null,
				countTimer: null,
				showProfile: false,
				activeDriftText: '',
				displayMoodCopy: '对方没有催我讲话，沉默变得没那么尴尬。',
				moodTypeTimer: null,
				galaxyRotateX: -8,
				galaxyRotateY: 18,
				galaxyDragging: false,
				galaxyMoved: false,
				galaxyStartX: 0,
				galaxyStartY: 0,
				galaxyAutoAngle: 0,
				galaxyTimer: null,
				orbitPlanets: [
					{ name: 'mint', angle: 12, radiusX: 224, radiusY: 58, size: 18, speed: 1.05, color: 'rgba(169,255,231,.92)' },
					{ name: 'violet', angle: 86, radiusX: 190, radiusY: 92, size: 26, speed: .72, color: 'rgba(162,155,254,.86)' },
					{ name: 'peach', angle: 156, radiusX: 246, radiusY: 74, size: 15, speed: .9, color: 'rgba(255,184,209,.9)' },
					{ name: 'lemon', angle: 218, radiusX: 202, radiusY: 110, size: 12, speed: 1.22, color: 'rgba(255,226,139,.88)' },
					{ name: 'aqua', angle: 288, radiusX: 270, radiusY: 84, size: 22, speed: .62, color: 'rgba(132,233,255,.82)' },
					{ name: 'snow', angle: 332, radiusX: 166, radiusY: 48, size: 10, speed: 1.38, color: 'rgba(255,255,255,.95)' }
				],
				matchText: "随机遇见一个人",
				doneText: "今天先到这里",
				moods: [{"key":"quiet","label":"想安静","icon":"◐","copy":"对方没有催我讲话，沉默变得没那么尴尬。"},{"key":"talk","label":"想说话","icon":"◒","copy":"聊了一个很小的日常话题，心情被拉亮了一点。"},{"key":"listen","label":"听着呢","icon":"◌","copy":"像有人坐在旁边，不需要解释为什么低落。"},{"key":"drift","label":"轻了一点","icon":"✦","copy":"只是给今天留一点柔软的痕迹。"}],
				companions: {"i":[{"name":"树荫下的风","avatar":"风","state":"在校园里发呆","quote":"可以安静待 15 分钟，不用急着找话题。"},{"name":"耳机里的云","avatar":"云","state":"刚从教室出来","quote":"今天只想慢慢说两句。"}],"e":[{"name":"便利店灯光","avatar":"光","state":"想聊点不重要的","quote":"要不要交换一句今天最荒唐的小事？"},{"name":"操场散步员","avatar":"跑","state":"刚从操场回来","quote":"我可以负责开场，你负责随便接。"}]},
				matchedPerson: {},
				stateBubbles: [
					{ type: 'i', text: '有人刚下课，想安静走一会。', time: '2 分钟前' },
					{ type: 'e', text: '一个 e 人想聊 5 分钟废话。', time: '刚刚' },
					{ type: 'i', text: '图书馆三楼有人在发呆。', time: '8 分钟前' }
				],
				quickSignals: [
					{ icon: '☁', text: '有点 emo', sub: '不想解释', mood: 'quiet' },
					{ icon: '✦', text: '太无聊了', sub: '想被拉一下', mood: 'talk' },
					{ icon: '◌', text: '只想旁听', sub: '听别人说说', mood: 'listen' }
				],
				driftMessages: [
					{ type: 'i', mood: 'quiet', text: '东操现在风很舒服' },
					{ type: 'i', mood: 'listen', text: '有人在图书馆假装努力' },
					{ type: 'e', mood: 'talk', text: '谁愿意陪我散步 10 分钟' },
					{ type: 'i', mood: 'quiet', text: '刚刚有人有点低落' },
					{ type: 'e', mood: 'talk', text: '想听一个不重要的故事' },
					{ type: 'i', mood: 'drift', text: '走在路上突然有点空' }
				],
				rules: [{"title":"半匿名","desc":"不展示学校、真实照片和复杂资料。"},{"title":"限时","desc":"房间自然结束，关系不会变成负担。"},{"title":"低压力","desc":"可以聊天，也可以只发一个“我在”。"}]
			}
		},
		computed: {
			activeMood() {
				return this.moods.find(item => item.key === this.currentMood) || this.moods[0]
			},
			timeLabel() {
				const hours = String(this.now.getHours()).padStart(2, '0')
				const minutes = String(this.now.getMinutes()).padStart(2, '0')
				return `${hours}:${minutes}`
			},
			galaxyStyle() {
				return 'transform: translate(-50%, -50%);'
			},
			orbitPlanetStyles() {
				return this.orbitPlanets.map((planet) => {
					const angle = (planet.angle + this.galaxyRotateY + this.galaxyAutoAngle * planet.speed) * Math.PI / 180
					const tilt = this.galaxyRotateX * Math.PI / 180
					const depth = Math.sin(angle)
					const x = Math.cos(angle) * planet.radiusX
					const y = Math.sin(angle) * planet.radiusY * Math.cos(tilt) + Math.sin(tilt) * 20
					const scale = 0.72 + (depth + 1) * 0.18
					const opacity = 0.42 + (depth + 1) * 0.25
					const blur = depth > 0 ? 0 : 1.2
					const zIndex = Math.round(8 + (depth + 1) * 7)
					return [
						`width: ${planet.size}rpx`,
						`height: ${planet.size}rpx`,
						`background: ${planet.color}`,
						`color: ${planet.color}`,
						`opacity: ${opacity}`,
						`z-index: ${zIndex}`,
						`filter: blur(${blur}rpx)`,
						`transform: translate(-50%, -50%) translate(${x}rpx, ${y}rpx) scale(${scale})`
					].join(';')
				})
			}
		},
		onLoad() {
			if (uni.getMenuButtonBoundingClientRect) {
				this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			}
			this.pickCompanion()
			this.animateAwakeCount(this.awakeCount)
			this.liveTimer = setInterval(() => {
				this.now = new Date()
				this.awakeCount = 118 + Math.floor(Math.random() * 28)
				this.waitingCount = 39 + Math.floor(Math.random() * 18)
				this.animateAwakeCount(this.awakeCount)
			}, 2600)
			this.galaxyTimer = setInterval(() => {
				this.galaxyAutoAngle = (this.galaxyAutoAngle + 1.2) % 360
			}, 50)
			this.displayMoodCopy = this.activeMood.copy
		},
		onUnload() {
			if (this.liveTimer) {
				clearInterval(this.liveTimer)
				this.liveTimer = null
			}
			if (this.countTimer) {
				clearInterval(this.countTimer)
				this.countTimer = null
			}
			if (this.galaxyTimer) {
				clearInterval(this.galaxyTimer)
				this.galaxyTimer = null
			}
			if (this.moodTypeTimer) {
				clearInterval(this.moodTypeTimer)
				this.moodTypeTimer = null
			}
		},
		methods: {
			animateAwakeCount(target) {
				if (this.countTimer) {
					clearInterval(this.countTimer)
				}
				const start = this.displayAwakeCount
				const diff = target - start
				let step = 0
				this.countTimer = setInterval(() => {
					step += 1
					const progress = Math.min(step / 18, 1)
					const eased = 1 - Math.pow(1 - progress, 3)
					this.displayAwakeCount = Math.round(start + diff * eased)
					if (progress >= 1) {
						clearInterval(this.countTimer)
						this.countTimer = null
					}
				}, 24)
			},
			pickCompanion() {
				const list = this.companions[this.currentMode]
				this.matchedPerson = list[Math.floor(Math.random() * list.length)]
			},
			openMatch() {
				if (this.chancesLeft === 0) {
					uni.showToast({ title: this.doneText, icon: 'none' })
					return
				}
				this.pickCompanion()
				this.showMatch = true
			},
			closeMatch() { this.showMatch = false },
			toggleMode() {
				this.currentMode = this.currentMode === 'i' ? 'e' : 'i'
			},
			changeMood(key) {
				this.currentMood = key
				this.playMoodCopy(this.activeMood.copy)
			},
			selectDrift(item) {
				this.currentMood = item.mood
				this.currentMode = item.type
				this.playMoodCopy(this.activeMood.copy)
				this.activeDriftText = this.activeDriftText === item.text ? '' : item.text
			},
			playMoodCopy(text) {
				if (this.moodTypeTimer) {
					clearInterval(this.moodTypeTimer)
					this.moodTypeTimer = null
				}
				const chars = Array.from(text)
				let index = 0
				this.displayMoodCopy = ''
				this.moodTypeTimer = setInterval(() => {
					index += 1
					this.displayMoodCopy = chars.slice(0, index).join('')
					if (index >= chars.length) {
						clearInterval(this.moodTypeTimer)
						this.moodTypeTimer = null
					}
				}, 42)
			},
			replyDrift() {
				uni.showToast({ title: '可以从一句话开始', icon: 'none' })
			},
			likeDrift() {
				uni.showToast({ title: '已轻轻回应', icon: 'none' })
			},
			openProfile() {
				this.openMatch()
			},
			closeProfile() {
				this.showProfile = false
			},
			getGalaxyPoint(event) {
				const touch = (event.touches && event.touches[0]) || (event.changedTouches && event.changedTouches[0])
				if (!touch) return null
				const x = touch.pageX !== undefined ? touch.pageX : touch.clientX
				const y = touch.pageY !== undefined ? touch.pageY : touch.clientY
				if (x === undefined || y === undefined) return null
				return { x, y }
			},
			startGalaxyDrag(event) {
				const point = this.getGalaxyPoint(event)
				if (!point) return
				this.galaxyDragging = true
				this.galaxyMoved = false
				this.galaxyStartX = point.x
				this.galaxyStartY = point.y
			},
			moveGalaxyDrag(event) {
				if (!this.galaxyDragging) return
				const point = this.getGalaxyPoint(event)
				if (!point) return
				const deltaX = point.x - this.galaxyStartX
				const deltaY = point.y - this.galaxyStartY
				if (Math.abs(deltaX) + Math.abs(deltaY) > 4) {
					this.galaxyMoved = true
				}
				this.galaxyRotateY = (this.galaxyRotateY + deltaX * 0.82) % 360
				this.galaxyRotateX = Math.max(-48, Math.min(48, this.galaxyRotateX - deltaY * 0.28))
				this.galaxyStartX = point.x
				this.galaxyStartY = point.y
			},
			endGalaxyDrag() {
				if (!this.galaxyDragging) return
				this.galaxyDragging = false
				if (!this.galaxyMoved) {
					this.goMatch()
				}
			},
			skipMatch() {
				this.chancesLeft = Math.max(this.chancesLeft - 1, 0)
				this.showMatch = false
				uni.showToast({ title: "这次轻轻划过了", icon: 'none' })
			},
			goChat() {
				this.chancesLeft = Math.max(this.chancesLeft - 1, 0)
				this.showMatch = false
				uni.navigateTo({ url: '/package1/ieBrowser/chat?mode=' + this.currentMode + '&mood=' + this.currentMood })
			},
			goMatch() {
				uni.navigateTo({ url: '/package1/ieBrowser/match?mode=' + this.currentMode + '&mood=' + this.currentMood })
			},
			goRecords() { uni.navigateTo({ url: '/package1/ieBrowser/chatList' }) },
			goArchive() { uni.navigateTo({ url: '/package1/ieBrowser/universe' }) },
			goFate() { uni.navigateTo({ url: '/package1/ieBrowser/fate' }) },
			goMessages() { uni.navigateTo({ url: '/package1/ieBrowser/messages' }) },
			goUniverse() { uni.navigateTo({ url: '/package1/ieBrowser/universe' }) }
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #f7f9ff;
	}

	.ie-page {
		min-height: 100vh;
		padding: 0 32rpx 164rpx;
		box-sizing: border-box;
		color: #161b2e;
		background:
			radial-gradient(circle at 82% 8%, rgba(221, 231, 255, .96), rgba(221, 231, 255, 0) 330rpx),
			radial-gradient(circle at 18% 28%, rgba(169, 255, 231, .48), rgba(169, 255, 231, 0) 300rpx),
			radial-gradient(circle at 86% 62%, rgba(255, 184, 209, .32), rgba(255, 184, 209, 0) 360rpx),
			linear-gradient(180deg, #fbfdff 0%, #eef4ff 52%, #fff4e8 100%);
		position: relative;
		overflow: hidden;
	}

	.ambient {
		position: absolute;
		border-radius: 50%;
		filter: blur(10rpx);
		opacity: .74;
		animation: floatGlow 8s ease-in-out infinite;
	}

	.ambient-a {
		top: 190rpx;
		right: -90rpx;
		width: 250rpx;
		height: 250rpx;
		background: rgba(139, 124, 255, .16);
	}

	.ambient-b {
		left: -130rpx;
		top: 520rpx;
		width: 330rpx;
		height: 330rpx;
		background: rgba(255, 214, 165, .34);
		animation-delay: 1.6s;
	}

	.page-head {
		position: relative;
		z-index: 1;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		padding-top: 76rpx;
		animation: riseIn .58s ease both;
	}

	.eyebrow {
		color: rgba(22, 27, 46, .42);
		font-size: 22rpx;
		letter-spacing: 6rpx;
		text-transform: uppercase;
	}

	.hero-title {
		margin-top: 18rpx;
		font-size: 56rpx;
		line-height: 68rpx;
		font-weight: 800;
		letter-spacing: -1rpx;
	}

	.hero-desc {
		width: 500rpx;
		margin-top: 16rpx;
		color: rgba(22, 27, 46, .56);
		font-size: 26rpx;
		line-height: 42rpx;
	}

	.archive-entry {
		width: 92rpx;
		height: 92rpx;
		border: 1rpx solid rgba(255, 255, 255, .8);
		border-radius: 50%;
		text-align: center;
		line-height: 92rpx;
		color: rgba(22, 27, 46, .58);
		font-size: 23rpx;
		background: rgba(255, 255, 255, .62);
		backdrop-filter: blur(24rpx);
		box-shadow: 0 18rpx 50rpx rgba(96, 112, 160, .12);
	}

	.night-card,
	.chance-card,
	.state-flow {
		position: relative;
		z-index: 1;
		border: 1rpx solid rgba(255, 255, 255, .76);
		background: rgba(255, 255, 255, .62);
		box-shadow: 0 28rpx 80rpx rgba(96, 112, 160, .13);
		backdrop-filter: blur(28rpx);
		animation: riseIn .58s ease both;
	}

	.night-card {
		margin-top: 54rpx;
		padding: 38rpx;
		border-radius: 46rpx;
		animation-delay: .08s;
	}

	.night-label,
	.match-label {
		color: #6c69d8;
		font-size: 22rpx;
		font-weight: 700;
	}

	.night-copy {
		margin-top: 18rpx;
		color: #161b2e;
		font-size: 38rpx;
		line-height: 58rpx;
		font-weight: 750;
	}

	.mood-list {
		display: flex;
		flex-wrap: wrap;
		margin-top: 30rpx;
	}

	.mood-chip {
		height: 62rpx;
		line-height: 62rpx;
		padding: 0 26rpx;
		margin: 0 16rpx 16rpx 0;
		border-radius: 999rpx;
		color: rgba(22, 27, 46, .52);
		background: rgba(255, 255, 255, .58);
		font-size: 24rpx;
		transition: all .24s ease;
	}

	.mood-chip.active {
		color: #11162a;
		background: #a9ffe7;
		box-shadow: 0 12rpx 28rpx rgba(169, 255, 231, .28);
	}

	.mode-section {
		position: relative;
		z-index: 1;
		margin-top: 42rpx;
		animation: riseIn .58s ease .14s both;
	}

	.section-line {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.section-title {
		margin-bottom: 20rpx;
		color: #161b2e;
		font-size: 30rpx;
		font-weight: 750;
	}

	.section-more {
		margin-bottom: 20rpx;
		color: rgba(22, 27, 46, .38);
		font-size: 22rpx;
	}

	.mode-grid {
		display: flex;
		gap: 20rpx;
	}

	.mode-card {
		flex: 1;
		min-height: 218rpx;
		padding: 30rpx;
		border: 1rpx solid rgba(255, 255, 255, .76);
		border-radius: 38rpx;
		background: rgba(255, 255, 255, .5);
		box-sizing: border-box;
		box-shadow: 0 18rpx 54rpx rgba(96, 112, 160, .1);
		transition: transform .18s ease, border-color .24s ease, background .24s ease;
	}

	.mode-card:active,
	.match-button:active,
	.state-bubble:active {
		transform: scale(.97);
	}

	.mode-card.active {
		border-color: rgba(169, 255, 231, .95);
		background: rgba(255, 255, 255, .72);
	}

	.mode-mark {
		width: 76rpx;
		height: 76rpx;
		border-radius: 28rpx;
		text-align: center;
		line-height: 76rpx;
		font-size: 42rpx;
		font-weight: 800;
	}

	.mode-i .mode-mark {
		color: #f7f4ff;
		background: #8b7cff;
	}

	.mode-e .mode-mark {
		color: #11162a;
		background: #a9ffe7;
	}

	.mode-title {
		margin-top: 24rpx;
		font-size: 30rpx;
		font-weight: 750;
	}

	.mode-desc {
		margin-top: 12rpx;
		color: rgba(22, 27, 46, .52);
		font-size: 23rpx;
		line-height: 36rpx;
	}

	.chance-card {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 34rpx;
		padding: 32rpx;
		border-radius: 38rpx;
		animation-delay: .2s;
	}

	.chance-title {
		font-size: 30rpx;
		font-weight: 750;
	}

	.chance-sub {
		margin-top: 10rpx;
		color: rgba(22, 27, 46, .5);
		font-size: 23rpx;
	}

	.chance-count {
		width: 110rpx;
		height: 110rpx;
		border-radius: 50%;
		text-align: center;
		line-height: 110rpx;
		color: #11162a;
		background: linear-gradient(145deg, #ffffff, #a9ffe7);
		font-size: 34rpx;
		font-weight: 800;
		box-shadow: 0 18rpx 42rpx rgba(169, 255, 231, .34);
	}

	.match-button {
		position: relative;
		z-index: 1;
		height: 108rpx;
		margin-top: 34rpx;
		border-radius: 999rpx;
		text-align: center;
		line-height: 108rpx;
		color: #11162a;
		background: linear-gradient(135deg, #ffffff, #a9ffe7 58%, #ffd6a5);
		font-size: 30rpx;
		font-weight: 800;
		box-shadow: 0 24rpx 58rpx rgba(169, 255, 231, .3);
		overflow: hidden;
		animation: breathButton 2.8s ease-in-out infinite;
	}

	.match-button.disabled {
		color: rgba(22, 27, 46, .36);
		background: rgba(255, 255, 255, .48);
		box-shadow: none;
	}

	.pulse {
		position: absolute;
		left: 34rpx;
		top: 34rpx;
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		background: rgba(139, 124, 255, .16);
	}

	.state-flow {
		margin-top: 44rpx;
		padding: 30rpx;
		border-radius: 40rpx;
		animation-delay: .26s;
	}

	.flow-cloud {
		min-height: 280rpx;
		position: relative;
	}

	.state-bubble {
		width: 560rpx;
		margin-bottom: 18rpx;
		padding: 24rpx 26rpx;
		border-radius: 999rpx;
		background: rgba(255, 255, 255, .56);
		box-shadow: 0 14rpx 38rpx rgba(96, 112, 160, .1);
		display: flex;
		align-items: center;
		animation: floatBubble 7s ease-in-out infinite;
	}

	.state-bubble:nth-child(2) {
		width: 500rpx;
		margin-left: 80rpx;
		animation-delay: .9s;
	}

	.state-bubble:nth-child(3) {
		width: 540rpx;
		margin-left: 26rpx;
		animation-delay: 1.8s;
	}

	.bubble-type {
		width: 54rpx;
		height: 54rpx;
		margin-right: 18rpx;
		border-radius: 50%;
		text-align: center;
		line-height: 54rpx;
		font-size: 24rpx;
		font-weight: 800;
	}

	.bubble-type.i {
		color: #f7f4ff;
		background: #8b7cff;
	}

	.bubble-type.e {
		color: #11162a;
		background: #a9ffe7;
	}

	.bubble-text {
		flex: 1;
		color: rgba(22, 27, 46, .72);
		font-size: 24rpx;
	}

	.bubble-time {
		margin-left: 14rpx;
		color: rgba(22, 27, 46, .34);
		font-size: 20rpx;
	}

	.bottom-actions {
		position: fixed;
		left: 30rpx;
		right: 30rpx;
		bottom: 30rpx;
		z-index: 10;
		display: flex;
		padding: 10rpx;
		border: 1rpx solid rgba(255, 255, 255, .76);
		border-radius: 999rpx;
		background: rgba(255, 255, 255, .62);
		backdrop-filter: blur(24rpx);
		box-shadow: 0 20rpx 60rpx rgba(96, 112, 160, .16);
	}

	.bottom-item {
		flex: 1;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		border-radius: 999rpx;
		color: rgba(22, 27, 46, .45);
		font-size: 23rpx;
	}

	.bottom-item.active {
		color: #11162a;
		background: #dffef4;
	}

	.match-mask {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 20;
		display: flex;
		align-items: flex-end;
		padding: 30rpx;
		background: rgba(22, 27, 46, .18);
		backdrop-filter: blur(18rpx);
		box-sizing: border-box;
	}

	.match-panel {
		width: 100%;
		padding: 34rpx;
		border: 1rpx solid rgba(255, 255, 255, .76);
		border-radius: 46rpx;
		background: rgba(255, 255, 255, .76);
		box-sizing: border-box;
		box-shadow: 0 30rpx 90rpx rgba(96, 112, 160, .18);
	}

	.match-top {
		display: flex;
		justify-content: space-between;
	}

	.close {
		color: rgba(22, 27, 46, .45);
		font-size: 42rpx;
		line-height: 34rpx;
	}

	.companion-orb {
		width: 152rpx;
		height: 152rpx;
		margin: 34rpx auto 0;
		border-radius: 50%;
		text-align: center;
		line-height: 152rpx;
		font-size: 48rpx;
		font-weight: 800;
	}

	.companion-orb.i {
		color: #f7f4ff;
		background: linear-gradient(145deg, #8b7cff, #dde7ff);
	}

	.companion-orb.e {
		color: #11162a;
		background: linear-gradient(145deg, #a9ffe7, #ffd6a5);
	}

	.match-name {
		margin-top: 24rpx;
		text-align: center;
		font-size: 36rpx;
		font-weight: 800;
	}

	.match-state {
		margin-top: 10rpx;
		text-align: center;
		color: rgba(22, 27, 46, .48);
		font-size: 23rpx;
	}

	.match-quote {
		margin-top: 30rpx;
		padding: 26rpx;
		border-radius: 28rpx;
		color: rgba(22, 27, 46, .72);
		background: rgba(255, 255, 255, .58);
		font-size: 26rpx;
		line-height: 42rpx;
	}

	.match-actions {
		display: flex;
		gap: 18rpx;
		margin-top: 30rpx;
	}

	.ghost-btn,
	.solid-btn {
		flex: 1;
		height: 86rpx;
		border-radius: 999rpx;
		text-align: center;
		line-height: 86rpx;
		font-size: 25rpx;
		font-weight: 700;
	}

	.ghost-btn {
		color: rgba(22, 27, 46, .55);
		background: rgba(255, 255, 255, .54);
	}

	.solid-btn {
		color: #11162a;
		background: #a9ffe7;
	}

	@keyframes riseIn {
		from { opacity: 0; transform: translateY(20rpx); }
		to { opacity: 1; transform: translateY(0); }
	}

	@keyframes floatGlow {
		0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
		50% { transform: translate3d(20rpx, -26rpx, 0) scale(1.08); }
	}

	@keyframes floatBubble {
		0%, 100% { transform: translateY(0); }
		50% { transform: translateY(-12rpx); }
	}

	@keyframes breathButton {
		0%, 100% { transform: scale(1); }
		50% { transform: scale(1.018); }
	}

	.ie-page {
		padding-bottom: 170rpx;
		color: #161b2e;
		background:
			radial-gradient(circle at 12% 10%, rgba(221,231,255,.92), transparent 320rpx),
			radial-gradient(circle at 88% 18%, rgba(169,255,231,.54), transparent 360rpx),
			radial-gradient(circle at 20% 72%, rgba(255,214,165,.5), transparent 380rpx),
			radial-gradient(circle at 86% 78%, rgba(255,184,209,.32), transparent 420rpx),
			linear-gradient(180deg, #fbfdff 0%, #eef4ff 58%, #fff7ec 100%);
	}

	.ie-page::before {
		content: '';
		position: absolute;
		inset: 0;
		pointer-events: none;
		opacity: .12;
		background-image:
			radial-gradient(circle, rgba(22,27,46,.34) 0 1rpx, transparent 1rpx),
			radial-gradient(circle, rgba(139,124,255,.22) 0 1rpx, transparent 1rpx);
		background-size: 42rpx 42rpx, 68rpx 68rpx;
		animation: noiseFloat 9s steps(6) infinite;
	}

	.ie-page::after {
		content: '';
		position: absolute;
		left: -20%;
		top: -15%;
		width: 140%;
		height: 120%;
		pointer-events: none;
		background: linear-gradient(120deg, transparent 15%, rgba(255,255,255,.42), transparent 45%, rgba(169,255,231,.24), transparent 70%);
		filter: blur(18rpx);
		animation: auroraMove 12s ease-in-out infinite alternate;
	}

	.status-head {
		position: relative;
		z-index: 2;
		padding-top: 74rpx;
	}

	.time-line {
		font-size: 46rpx;
		line-height: 58rpx;
		font-weight: 300;
		letter-spacing: 2rpx;
		color: #161b2e;
	}

	.live-line {
		width: 560rpx;
		margin-top: 18rpx;
		font-size: 34rpx;
		line-height: 48rpx;
		font-weight: 700;
		color: #161b2e;
	}

	.sub-line {
		margin-top: 8rpx;
		color: rgba(22,27,46,.48);
		font-size: 24rpx;
	}

	.status-head .archive-entry {
		position: absolute;
		right: 0;
		top: 72rpx;
		width: 134rpx;
		height: 58rpx;
		line-height: 58rpx;
		border-radius: 999rpx;
		color: rgba(22,27,46,.58);
		background: rgba(255,255,255,.58);
		border-color: rgba(255,255,255,.78);
		box-shadow: 0 24rpx 70rpx rgba(96,112,160,.13);
	}

	.drift-field {
		position: relative;
		z-index: 2;
		height: 660rpx;
		margin-top: 28rpx;
	}

	.wave-line {
		position: absolute;
		left: 50%;
		top: 50%;
		border: 1rpx solid rgba(139,124,255,.16);
		border-radius: 50%;
		transform: translate(-50%, -50%) rotate(-12deg);
	}

	.wave-a {
		width: 620rpx;
		height: 310rpx;
		animation: orbitBreath 7.5s ease-in-out infinite;
	}

	.wave-b {
		width: 460rpx;
		height: 460rpx;
		border-color: rgba(169,255,231,.34);
		animation: orbitSpin 18s linear infinite;
	}

	.signal-planet {
		position: absolute;
		left: 50%;
		top: 50%;
		width: 246rpx;
		height: 246rpx;
		transform: translate(-50%, -50%);
		border-radius: 50%;
		background: rgba(255,255,255,.52);
		box-shadow:
			0 0 0 1rpx rgba(255,255,255,.78),
			0 28rpx 90rpx rgba(169,255,231,.24),
			inset 0 0 70rpx rgba(255,255,255,.38);
		backdrop-filter: blur(26rpx);
		overflow: hidden;
		animation: planetBreath 3.2s ease-in-out infinite;
	}

	.liquid {
		position: absolute;
		border-radius: 45%;
		filter: blur(2rpx);
	}

	.liquid-a {
		left: -30rpx;
		top: 22rpx;
		width: 220rpx;
		height: 190rpx;
		background: rgba(169,255,231,.58);
		animation: liquidMove 7s ease-in-out infinite;
	}

	.liquid-b {
		right: -44rpx;
		bottom: 10rpx;
		width: 190rpx;
		height: 210rpx;
		background: rgba(139,124,255,.28);
		animation: liquidMove 8s ease-in-out infinite reverse;
	}

	.planet-core {
		position: relative;
		z-index: 2;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.planet-text {
		width: 150rpx;
		font-size: 28rpx;
		line-height: 38rpx;
		font-weight: 700;
		color: #161b2e;
	}

	.planet-sub {
		margin-top: 10rpx;
		color: rgba(22,27,46,.48);
		font-size: 21rpx;
	}

	.drift-fragment {
		position: absolute;
		z-index: 3;
		display: flex;
		align-items: center;
		padding: 16rpx 22rpx;
		border: 1rpx solid rgba(255,255,255,.78);
		border-radius: 999rpx;
		background: rgba(255,255,255,.64);
		backdrop-filter: blur(22rpx);
		box-shadow: 0 18rpx 60rpx rgba(0,0,0,.12);
		animation: fragmentFloat 8s ease-in-out infinite;
	}

	.fragment-dot {
		width: 12rpx;
		height: 12rpx;
		margin-right: 12rpx;
		border-radius: 50%;
		background: #a9ffe7;
		box-shadow: 0 0 20rpx rgba(169,255,231,.8);
	}

	.drift-fragment.e .fragment-dot {
		background: #ffd6a5;
		box-shadow: 0 0 20rpx rgba(255,214,165,.75);
	}

	.fragment-text {
		color: rgba(22,27,46,.72);
		font-size: 23rpx;
		white-space: nowrap;
	}

	.fragment-0 { left: 18rpx; top: 72rpx; animation-delay: .2s; }
	.fragment-1 { right: 18rpx; top: 154rpx; animation-delay: 1.1s; }
	.fragment-2 { left: 62rpx; bottom: 110rpx; animation-delay: 2s; }
	.fragment-3 { right: 26rpx; bottom: 196rpx; animation-delay: .6s; }
	.fragment-4 { left: 210rpx; top: 18rpx; animation-delay: 1.7s; }
	.fragment-5 { left: 154rpx; bottom: 28rpx; animation-delay: 2.4s; }

	.mood-dock {
		position: relative;
		z-index: 3;
		margin-top: -34rpx;
		padding: 28rpx;
		border: 1rpx solid rgba(255,255,255,.9);
		border-radius: 42rpx;
		background:
			linear-gradient(135deg, rgba(255,255,255,.88), rgba(255,255,255,.54)),
			radial-gradient(circle at 18% 0%, rgba(169,255,231,.26), transparent 180rpx),
			radial-gradient(circle at 88% 100%, rgba(255,184,209,.16), transparent 220rpx);
		backdrop-filter: blur(30rpx);
		box-shadow:
			0 28rpx 80rpx rgba(96,112,160,.16),
			inset 0 1rpx 0 rgba(255,255,255,.96),
			inset 0 -1rpx 0 rgba(139,124,255,.08);
		overflow: hidden;
		animation: panelBreath 5.6s ease-in-out infinite;
	}

	.mood-dock::before {
		content: '';
		position: absolute;
		left: -20%;
		top: -80%;
		width: 140%;
		height: 120%;
		background: linear-gradient(110deg, transparent 18%, rgba(255,255,255,.48), transparent 58%);
		animation: glassSweep 7s ease-in-out infinite;
		pointer-events: none;
	}

	.dock-title {
		position: relative;
		z-index: 1;
		color: rgba(22,27,46,.72);
		font-size: 27rpx;
		line-height: 42rpx;
		font-weight: 650;
	}

	.dock-scroll {
		width: 100%;
		margin-top: 20rpx;
		white-space: nowrap;
	}

	.dock-row {
		position: relative;
		z-index: 1;
		display: flex;
		align-items: center;
	}

	.mood-dock .mood-chip,
	.mode-switch {
		flex-shrink: 0;
		height: 64rpx;
		line-height: 64rpx;
		padding: 0 26rpx;
		margin-right: 14rpx;
		border-radius: 999rpx;
		color: rgba(22,27,46,.5);
		background: rgba(255,255,255,.72);
		border: 1rpx solid rgba(255,255,255,.82);
		box-shadow:
			0 10rpx 28rpx rgba(96,112,160,.08),
			inset 0 1rpx 0 rgba(255,255,255,.9);
		font-size: 23rpx;
		transition: transform .16s ease, background .24s ease;
	}

	.mood-dock .mood-chip:active,
	.mode-switch:active {
		transform: scale(.96);
	}

	.mood-dock .mood-chip.active {
		color: #161b2e;
		background: linear-gradient(135deg, #eafff8, #a9ffe7);
		box-shadow:
			0 14rpx 34rpx rgba(169,255,231,.34),
			inset 0 1rpx 0 rgba(255,255,255,.92);
	}

	.mode-switch {
		color: #6c69d8;
		border: 1rpx solid rgba(139,124,255,.2);
		background: linear-gradient(135deg, rgba(255,255,255,.78), rgba(221,231,255,.58));
	}

	.page-head,
	.night-card:not(.mood-console),
	.mode-section,
	.chance-card,
	.match-button,
	.state-flow,
	.quick-signals {
		display: none;
	}

	.bottom-actions {
		padding: 12rpx;
		border-radius: 999rpx;
		background:
			linear-gradient(135deg, rgba(255,255,255,.88), rgba(255,255,255,.58)),
			radial-gradient(circle at 12% 0%, rgba(169,255,231,.2), transparent 160rpx);
		border: 1rpx solid rgba(255,255,255,.9);
		box-shadow:
			0 24rpx 80rpx rgba(96,112,160,.18),
			inset 0 1rpx 0 rgba(255,255,255,.96),
			inset 0 -1rpx 0 rgba(139,124,255,.08);
	}

	.bottom-item {
		height: 70rpx;
		line-height: 70rpx;
		color: rgba(22,27,46,.38);
		transition: transform .16s ease, background .24s ease;
	}

	.bottom-item:active {
		transform: scale(.96);
	}

	.bottom-item.active {
		color: #161b2e;
		background: linear-gradient(135deg, #eafff8, #a9ffe7);
		box-shadow:
			0 12rpx 30rpx rgba(169,255,231,.34),
			inset 0 1rpx 0 rgba(255,255,255,.95);
	}

	@keyframes panelBreath {
		0%, 100% { transform: translateY(0); box-shadow: 0 28rpx 80rpx rgba(96,112,160,.16), inset 0 1rpx 0 rgba(255,255,255,.96), inset 0 -1rpx 0 rgba(139,124,255,.08); }
		50% { transform: translateY(-4rpx); box-shadow: 0 34rpx 92rpx rgba(96,112,160,.2), inset 0 1rpx 0 rgba(255,255,255,.98), inset 0 -1rpx 0 rgba(139,124,255,.12); }
	}

	@keyframes glassSweep {
		0%, 70%, 100% { transform: translateX(-40%) rotate(8deg); opacity: 0; }
		80% { opacity: .7; }
		92% { transform: translateX(45%) rotate(8deg); opacity: 0; }
	}

	@keyframes noiseFloat {
		0%, 100% { transform: translate3d(0,0,0); }
		50% { transform: translate3d(-16rpx, 10rpx, 0); }
	}

	@keyframes auroraMove {
		from { transform: translateX(-70rpx) rotate(-4deg); opacity: .5; }
		to { transform: translateX(70rpx) rotate(4deg); opacity: .9; }
	}

	@keyframes orbitBreath {
		0%, 100% { transform: translate(-50%, -50%) rotate(-12deg) scale(.96); opacity: .42; }
		50% { transform: translate(-50%, -50%) rotate(-6deg) scale(1.05); opacity: .9; }
	}

	@keyframes orbitSpin {
		from { transform: translate(-50%, -50%) rotate(0deg); }
		to { transform: translate(-50%, -50%) rotate(360deg); }
	}

	@keyframes planetBreath {
		0%, 100% { transform: translate(-50%, -50%) scale(.98); }
		50% { transform: translate(-50%, -50%) scale(1.04); }
	}

	@keyframes liquidMove {
		0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
		50% { transform: translate(22rpx, 18rpx) rotate(18deg) scale(1.12); }
	}

	@keyframes fragmentFloat {
		0%, 100% { transform: translate3d(0,0,0); }
		50% { transform: translate3d(0,-18rpx,0); }
	}

	/* All-day airy theme override: keep motion, remove heavy night mood. */
	.ie-page {
		color: #161b2e;
		background:
			radial-gradient(circle at 12% 10%, rgba(221,231,255,.92), transparent 320rpx),
			radial-gradient(circle at 88% 18%, rgba(169,255,231,.54), transparent 360rpx),
			radial-gradient(circle at 20% 72%, rgba(255,214,165,.5), transparent 380rpx),
			radial-gradient(circle at 86% 78%, rgba(255,184,209,.32), transparent 420rpx),
			linear-gradient(180deg, #fbfdff 0%, #eef4ff 58%, #fff7ec 100%);
	}

	.ie-page::before {
		opacity: .11;
		background-image:
			radial-gradient(circle, rgba(22,27,46,.34) 0 1rpx, transparent 1rpx),
			radial-gradient(circle, rgba(139,124,255,.22) 0 1rpx, transparent 1rpx);
	}

	.ie-page::after {
		background: linear-gradient(120deg, transparent 12%, rgba(255,255,255,.42), transparent 42%, rgba(169,255,231,.24), transparent 70%);
		opacity: .75;
	}

	.time-line,
	.live-line,
	.planet-text {
		color: #161b2e;
	}

	.sub-line,
	.planet-sub {
		color: rgba(22,27,46,.48);
	}

	.status-head .archive-entry,
	.mood-dock,
	.drift-fragment,
	.bottom-actions {
		background: rgba(255,255,255,.58);
		border-color: rgba(255,255,255,.78);
		box-shadow: 0 24rpx 70rpx rgba(96,112,160,.13);
	}

	.drift-fragment {
		background: rgba(255,255,255,.64);
	}

	.fragment-text,
	.dock-title {
		color: rgba(22,27,46,.72);
	}

	.wave-line {
		border-color: rgba(139,124,255,.16);
	}

	.wave-b {
		border-color: rgba(169,255,231,.34);
	}

	.signal-planet {
		background: rgba(255,255,255,.52);
		box-shadow:
			0 0 0 1rpx rgba(255,255,255,.78),
			0 28rpx 90rpx rgba(169,255,231,.24),
			inset 0 0 70rpx rgba(255,255,255,.38);
	}

	.liquid-a {
		background: rgba(169,255,231,.58);
	}

	.liquid-b {
		background: rgba(139,124,255,.28);
	}

	.mood-dock .mood-chip,
	.mode-switch {
		color: rgba(22,27,46,.54);
		background: rgba(255,255,255,.68);
	}

	.mode-switch {
		color: #6c69d8;
		border-color: rgba(139,124,255,.18);
	}

	.bottom-actions {
		background: rgba(255,255,255,.72);
	}

	.bottom-item {
		color: rgba(22,27,46,.42);
	}

	.bottom-item.active {
		color: #161b2e;
		background: rgba(169,255,231,.9);
	}

	/* Final polish for the two floating controls. */
	.mood-dock {
		background:
			linear-gradient(135deg, rgba(255,255,255,.88), rgba(255,255,255,.54)),
			radial-gradient(circle at 18% 0%, rgba(169,255,231,.26), transparent 180rpx),
			radial-gradient(circle at 88% 100%, rgba(255,184,209,.16), transparent 220rpx);
		border-color: rgba(255,255,255,.9);
		border-radius: 42rpx;
		box-shadow:
			0 28rpx 80rpx rgba(96,112,160,.16),
			inset 0 1rpx 0 rgba(255,255,255,.96),
			inset 0 -1rpx 0 rgba(139,124,255,.08);
	}

	.mood-dock .mood-chip,
	.mode-switch {
		background: rgba(255,255,255,.72);
		border: 1rpx solid rgba(255,255,255,.82);
		box-shadow: 0 10rpx 28rpx rgba(96,112,160,.08), inset 0 1rpx 0 rgba(255,255,255,.9);
	}

	.mood-dock .mood-chip.active {
		background: linear-gradient(135deg, #eafff8, #a9ffe7);
		box-shadow: 0 14rpx 34rpx rgba(169,255,231,.34), inset 0 1rpx 0 rgba(255,255,255,.92);
	}

	.bottom-actions {
		background:
			linear-gradient(135deg, rgba(255,255,255,.88), rgba(255,255,255,.58)),
			radial-gradient(circle at 12% 0%, rgba(169,255,231,.2), transparent 160rpx);
		border-color: rgba(255,255,255,.9);
		box-shadow:
			0 24rpx 80rpx rgba(96,112,160,.18),
			inset 0 1rpx 0 rgba(255,255,255,.96),
			inset 0 -1rpx 0 rgba(139,124,255,.08);
	}

	.bottom-item.active {
		background: linear-gradient(135deg, #eafff8, #a9ffe7);
		box-shadow: 0 12rpx 30rpx rgba(169,255,231,.34), inset 0 1rpx 0 rgba(255,255,255,.95);
	}

	/* Z-generation Morandi neumorphism polish. */
	.live-line {
		font-size: 48rpx;
		line-height: 64rpx;
		font-weight: 300;
		letter-spacing: -1rpx;
	}

	.count-num {
		display: inline-block;
		min-width: 74rpx;
		font-weight: 700;
		color: #6c5ce7;
		animation: countPop .42s ease;
	}

	.sub-line {
		display: inline-block;
		margin-top: 16rpx;
		padding: 10rpx 20rpx;
		border-radius: 999rpx;
		background: rgba(255,255,255,.52);
		backdrop-filter: blur(16rpx);
		box-shadow: inset 0 1rpx 0 rgba(255,255,255,.9), 0 10rpx 28rpx rgba(96,112,160,.08);
		text-align: left;
	}

	.planet-entry {
		width: 88rpx !important;
		height: 88rpx !important;
		border-radius: 50% !important;
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(135deg, #6c5ce7, #a29bfe) !important;
		box-shadow: 0 18rpx 46rpx rgba(108,92,231,.28), 0 0 0 10rpx rgba(162,155,254,.12) !important;
		transition: transform .18s ease;
	}

	.planet-entry:active {
		transform: scale(.94);
		box-shadow: 0 24rpx 62rpx rgba(108,92,231,.36), 0 0 0 16rpx rgba(162,155,254,.12) !important;
	}

	.planet-ring {
		position: absolute;
		width: 62rpx;
		height: 28rpx;
		border: 3rpx solid rgba(255,255,255,.5);
		border-radius: 50%;
		transform: rotate(-18deg);
	}

	.planet-icon {
		position: relative;
		z-index: 1;
		color: #fff;
		font-size: 42rpx;
		font-weight: 800;
	}

	.drift-fragment {
		border-radius: 40rpx;
		box-shadow:
			10rpx 14rpx 34rpx rgba(150,164,190,.16),
			-8rpx -8rpx 24rpx rgba(255,255,255,.82),
			inset 1rpx 1rpx 1rpx rgba(255,255,255,.9),
			inset -2rpx -2rpx 6rpx rgba(139,124,255,.06);
		transition: transform .18s ease, box-shadow .18s ease;
	}

	.drift-fragment:active {
		transform: translateY(-8rpx) scale(1.02);
		box-shadow:
			14rpx 20rpx 46rpx rgba(150,164,190,.2),
			-8rpx -8rpx 24rpx rgba(255,255,255,.9),
			inset 1rpx 1rpx 1rpx rgba(255,255,255,.95);
	}

	.drift-fragment.quiet,
	.drift-fragment.listen,
	.drift-fragment.drift {
		background: linear-gradient(135deg, rgba(229,238,248,.86), rgba(255,255,255,.62));
	}

	.drift-fragment.talk {
		background: linear-gradient(135deg, rgba(255,214,165,.74), rgba(255,255,255,.62));
	}

	.drift-fragment.e {
		background: linear-gradient(135deg, rgba(255,184,209,.62), rgba(255,255,255,.62));
	}

	.bubble-actions {
		position: absolute;
		left: 50%;
		top: 72rpx;
		transform: translateX(-50%);
		display: flex;
		padding: 8rpx;
		border-radius: 999rpx;
		background: rgba(255,255,255,.72);
		backdrop-filter: blur(18rpx);
		box-shadow: 0 16rpx 40rpx rgba(96,112,160,.14);
	}

	.bubble-actions view {
		padding: 8rpx 18rpx;
		border-radius: 999rpx;
		color: rgba(22,27,46,.62);
		font-size: 20rpx;
		white-space: nowrap;
	}

	.signal-planet {
		border-radius: 47% 53% 44% 56% / 56% 42% 58% 44%;
		animation: planetBreath 3.2s ease-in-out infinite, blobMorph 9s ease-in-out infinite;
	}

	.signal-planet {
		width: 370rpx;
		height: 370rpx;
		background: transparent;
		box-shadow: none;
		overflow: visible;
		perspective: 980rpx;
		animation: none;
	}

	.galaxy-breath {
		position: absolute;
		inset: 0;
		animation: galaxyBreath 4.2s ease-in-out infinite;
	}

	.galaxy-body {
		position: absolute;
		left: 50%;
		top: 50%;
		width: 226rpx;
		height: 226rpx;
		transform: translate(-50%, -50%) translateZ(34rpx);
		border-radius: 47% 53% 44% 56% / 56% 42% 58% 44%;
		background:
			radial-gradient(circle at 28% 24%, rgba(255,255,255,.92), rgba(255,255,255,0) 36%),
			radial-gradient(circle at 70% 74%, rgba(162,155,254,.64), rgba(162,155,254,0) 44%),
			linear-gradient(135deg, rgba(169,255,231,.74), rgba(221,231,255,.72) 54%, rgba(255,184,209,.48));
		box-shadow:
			0 34rpx 90rpx rgba(108,92,231,.2),
			inset 10rpx 12rpx 34rpx rgba(255,255,255,.62),
			inset -20rpx -22rpx 42rpx rgba(108,92,231,.17);
		overflow: hidden;
		z-index: 12;
		animation: blobMorph 9s ease-in-out infinite;
	}

	.galaxy-body::before {
		content: '';
		position: absolute;
		left: 22rpx;
		top: 18rpx;
		width: 88rpx;
		height: 70rpx;
		border-radius: 50%;
		background: radial-gradient(circle, rgba(255,255,255,.82), rgba(255,255,255,0) 68%);
		filter: blur(2rpx);
		z-index: 1;
	}

	.galaxy-ring {
		position: absolute;
		left: 50%;
		top: 50%;
		border-radius: 50%;
		pointer-events: none;
	}

	.orbit-planet {
		position: absolute;
		left: 50%;
		top: 50%;
		border-radius: 50%;
		pointer-events: none;
		box-shadow:
			0 0 18rpx rgba(255,255,255,.72),
			0 0 34rpx currentColor,
			inset 3rpx 4rpx 8rpx rgba(255,255,255,.68),
			inset -4rpx -5rpx 10rpx rgba(108,92,231,.18);
		transition: transform .08s linear, opacity .08s linear, filter .08s linear;
	}

	.orbit-planet::after {
		content: '';
		position: absolute;
		left: 18%;
		top: 16%;
		width: 34%;
		height: 28%;
		border-radius: 50%;
		background: rgba(255,255,255,.86);
		filter: blur(1rpx);
	}

	.orbit-planet-1,
	.orbit-planet-4 {
		box-shadow:
			0 0 22rpx rgba(162,155,254,.42),
			0 0 46rpx currentColor,
			inset 4rpx 5rpx 10rpx rgba(255,255,255,.66),
			inset -5rpx -7rpx 12rpx rgba(108,92,231,.2);
	}

	.ring-main {
		width: 430rpx;
		height: 132rpx;
		margin-left: -215rpx;
		margin-top: -66rpx;
		border: 12rpx solid rgba(111, 231, 224, .34);
		box-shadow: 0 0 34rpx rgba(169,255,231,.3), inset 0 0 22rpx rgba(255,255,255,.44);
		transform: rotateX(66deg) rotateZ(-14deg);
		animation: ringDrift 9s linear infinite;
	}

	.ring-second {
		width: 360rpx;
		height: 108rpx;
		margin-left: -180rpx;
		margin-top: -54rpx;
		border: 4rpx solid rgba(162,155,254,.36);
		transform: rotateX(72deg) rotateZ(24deg) translateZ(24rpx);
		animation: ringDrift 12s linear infinite reverse;
	}

	.ring-third {
		width: 292rpx;
		height: 292rpx;
		margin-left: -146rpx;
		margin-top: -146rpx;
		border: 3rpx solid rgba(255,214,165,.34);
		transform: rotateX(18deg) rotateY(64deg);
		animation: ringDrift 15s linear infinite;
	}

	.galaxy-body .liquid-a {
		left: -38rpx;
		top: 14rpx;
		width: 202rpx;
		height: 182rpx;
	}

	.galaxy-body .liquid-b {
		right: -50rpx;
		bottom: -16rpx;
		width: 194rpx;
		height: 190rpx;
	}

	.galaxy-body .planet-text {
		width: 146rpx;
		font-size: 30rpx;
		line-height: 40rpx;
	}

	.galaxy-body .planet-sub {
		font-size: 21rpx;
	}

	.soul-particle {
		position: absolute;
		width: 8rpx;
		height: 8rpx;
		border-radius: 50%;
		background: rgba(255,255,255,.86);
		box-shadow: 0 0 18rpx rgba(255,255,255,.8);
		z-index: 2;
		animation: soulFloat 5s ease-in-out infinite;
	}

	.soul-a { left: 64rpx; top: 54rpx; }
	.soul-b { right: 58rpx; top: 96rpx; animation-delay: 1.2s; }
	.soul-c { left: 118rpx; bottom: 58rpx; animation-delay: 2s; }

	.planet-sub {
		animation: subBreath 3s ease-in-out infinite;
	}

	.dock-title {
		text-align: center;
		font-size: 30rpx;
		line-height: 44rpx;
		font-style: normal;
		font-weight: 650;
		white-space: nowrap;
		letter-spacing: -.2rpx;
		background: linear-gradient(180deg, rgba(255,255,255,0), rgba(169,255,231,.1));
		border-radius: 28rpx;
		padding: 8rpx 8rpx 14rpx;
		min-height: 66rpx;
	}

	.typing-cursor {
		display: inline-block;
		width: 3rpx;
		height: 30rpx;
		margin-left: 6rpx;
		border-radius: 999rpx;
		background: rgba(108,92,231,.58);
		vertical-align: -4rpx;
		animation: typingCursor .86s steps(1) infinite;
	}

	.mood-icon {
		display: inline-block;
		margin-right: 8rpx;
		transition: transform .24s ease;
	}

	.mood-dock .mood-chip:active .mood-icon {
		transform: translateY(-3rpx) scale(1.12);
	}

	.tab-glow {
		position: absolute;
		left: 12rpx;
		bottom: 8rpx;
		width: calc(25% - 6rpx);
		height: 6rpx;
		border-radius: 999rpx;
		background: linear-gradient(90deg, rgba(169,255,231,0), rgba(169,255,231,.95), rgba(169,255,231,0));
		box-shadow: 0 0 18rpx rgba(169,255,231,.7);
	}

	.bottom-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 76rpx;
		line-height: 1;
		font-size: 22rpx;
	}

	.tab-icon {
		margin-bottom: 6rpx;
		font-size: 28rpx;
		filter: grayscale(1);
		opacity: .55;
	}

	.bottom-item.active .tab-icon {
		filter: none;
		opacity: 1;
		color: #6c5ce7;
	}

	.profile-mask {
		position: fixed;
		inset: 0;
		z-index: 30;
		display: flex;
		align-items: flex-end;
		padding: 34rpx;
		background: rgba(22,27,46,.12);
		backdrop-filter: blur(18rpx);
		box-sizing: border-box;
	}

	.profile-mini {
		width: 100%;
		padding: 40rpx 34rpx;
		border-radius: 44rpx;
		background: rgba(255,255,255,.78);
		border: 1rpx solid rgba(255,255,255,.9);
		box-shadow: 0 30rpx 90rpx rgba(96,112,160,.18), inset 0 1rpx 0 rgba(255,255,255,.96);
		text-align: center;
	}

	.mini-orb {
		width: 104rpx;
		height: 104rpx;
		margin: 0 auto;
		border-radius: 50%;
		line-height: 104rpx;
		color: #fff;
		background: linear-gradient(135deg, #6c5ce7, #a29bfe);
		font-size: 44rpx;
	}

	.mini-title {
		margin-top: 22rpx;
		font-size: 34rpx;
		font-weight: 700;
	}

	.mini-sub {
		margin-top: 10rpx;
		color: rgba(22,27,46,.5);
		font-size: 24rpx;
	}

	.mini-action {
		margin-top: 28rpx;
		height: 82rpx;
		line-height: 82rpx;
		border-radius: 999rpx;
		color: #161b2e;
		background: linear-gradient(135deg, #eafff8, #a9ffe7);
		font-size: 26rpx;
		font-weight: 700;
	}

	@keyframes countPop {
		0% { transform: translateY(8rpx) scale(.96); opacity: .55; }
		70% { transform: translateY(-3rpx) scale(1.04); opacity: 1; }
		100% { transform: translateY(0) scale(1); }
	}

	@keyframes blobMorph {
		0%, 100% { border-radius: 47% 53% 44% 56% / 56% 42% 58% 44%; }
		50% { border-radius: 58% 42% 55% 45% / 44% 58% 42% 56%; }
	}

	@keyframes soulFloat {
		0%, 100% { transform: translate3d(0,0,0); opacity: .36; }
		50% { transform: translate3d(12rpx,-18rpx,0); opacity: .95; }
	}

	@keyframes subBreath {
		0%, 100% { opacity: .75; }
		50% { opacity: 1; }
	}

	@keyframes typingCursor {
		0%, 48% { opacity: 1; }
		49%, 100% { opacity: 0; }
	}

	@keyframes galaxyBreath {
		0%, 100% { transform: scale(.98); }
		50% { transform: scale(1.035); }
	}

	@keyframes ringDrift {
		from { filter: hue-rotate(0deg); }
		to { filter: hue-rotate(18deg); }
	}
</style>
