<template>
	<view class="profile-page">
		<view class="top-app-bar">
			<view class="nav-left">
				<button class="icon-button" aria-label="设置" @click="emit('open-settings')">
					<view class="settings-icon"></view>
				</button>
				<button class="icon-button home-button" aria-label="首页" @click="emit('go-home')">
					<view class="home-icon"></view>
				</button>
			</view>
			<button class="icon-button" aria-label="个人中心">
				<view class="account-icon active"></view>
			</button>
		</view>

		<scroll-view class="dashboard" scroll-y>
			<view class="profile-card dashboard-card">
				<view class="avatar-wrap">
					<image
						class="avatar-image"
						mode="aspectFill"
						src="https://lh3.googleusercontent.com/aida-public/AB6AXuDGDLuBqLjh_SubGoCUg45p2XkSKyTmm_AgVZYoBYjI_RtN9MjhdBR27SzIqSpMnDVwnAoVl2coW7vDPVTdIDgkMjN1SIdxITaqQOJti1jUypNt9OUOTj7r8gmkyYSK9eUzIfG8EqY_shc9mqzxJFSJ9QFqa4gQGwV9FoqspXpGM3_aOzqtUtmOAp9owP22ozTNLh87AfqR_DnOpJ1rMd9szFgIQQinFjO-GsL8h-0oRdvamAM_v_OsVHH25Fez2cHQH4cIHOqSMFo"
					></image>
					<text class="level-badge">Lv.3</text>
				</view>
				<view class="profile-copy">
					<view class="name-row">
						<text class="doctor-name">明医生</text>
						<text class="level-chip">临床思维 Lv.3</text>
					</view>
					<view class="honor-row">
						<view class="honor-item">
							<view class="verified-icon"></view>
							<text>诊断大师</text>
						</view>
						<text class="divider">|</text>
						<view class="honor-item">
							<view class="emergency-icon"></view>
							<text>急诊先锋</text>
						</view>
					</view>
				</view>
			</view>

			<view class="metrics-grid">
				<view class="metric-card dashboard-card">
					<text class="metric-label">临床思维评分</text>
					<view class="metric-inline">
						<text class="metric-value">82</text>
						<text class="metric-top">Top 15%</text>
					</view>
				</view>
				<view class="metric-card dashboard-card">
					<text class="metric-label">连续学习天数</text>
					<text class="metric-value">18</text>
				</view>
				<view class="metric-card dashboard-card">
					<text class="metric-label">已攻克案例</text>
					<text class="metric-value">126</text>
				</view>
				<view class="metric-card dashboard-card">
					<text class="metric-label">AI 活跃指数</text>
					<text class="metric-value">A</text>
				</view>
			</view>

			<view class="two-col">
				<view class="dashboard-card compact-card">
					<text class="card-title">临床能力画像</text>
					<view class="radar-box">
						<svg class="mini-radar" viewBox="0 0 100 100">
							<circle cx="50" cy="50" fill="none" r="45" stroke="#e5e7eb" stroke-dasharray="2 2" stroke-width="0.5"></circle>
							<polygon fill="#5B9BD5" fill-opacity="0.3" points="50,15 80,35 85,60 60,85 35,80 15,55 25,30 40,20" stroke="#5B9BD5" stroke-width="1.5"></polygon>
						</svg>
						<text class="radar-label top">问诊能力</text>
						<text class="radar-label bottom">临床决策</text>
					</view>
				</view>
				<view class="dashboard-card compact-card">
					<view class="card-head">
						<text class="card-title">成长趋势</text>
						<view class="segmented">
							<text class="seg active">日</text>
							<text class="seg">周</text>
						</view>
					</view>
					<view class="trend-bars">
						<view class="trend-bar tone-1"></view>
						<view class="trend-bar tone-2"></view>
						<view class="trend-bar tone-3"></view>
						<view class="trend-bar tone-4"></view>
					</view>
				</view>
			</view>

			<view class="two-col">
				<view class="dashboard-card compact-card">
					<text class="card-title">训练热力图</text>
					<view class="heat-grid">
						<view
							v-for="(tone, index) in heatTones"
							:key="index"
							class="heat-cell"
							:class="tone"
						></view>
					</view>
					<view class="heat-legend">
						<text>训练分布</text>
						<text>少■多</text>
					</view>
				</view>
				<view class="dashboard-card compact-card">
					<text class="card-title">专科能力</text>
					<view class="specialty-list">
						<view class="specialty">
							<view class="specialty-head">
								<text>呼吸内科</text>
								<text class="percent">91%</text>
							</view>
							<view class="mini-track">
								<view class="mini-fill fill-91"></view>
							</view>
						</view>
						<view class="specialty">
							<view class="specialty-head">
								<text>急诊医学</text>
								<text class="percent">88%</text>
							</view>
							<view class="mini-track">
								<view class="mini-fill fill-88"></view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="insight-stack">
				<view class="dashboard-card insight-card">
					<view class="insight-title">
						<view class="psychology-icon"></view>
						<text>AI 弱点诊断</text>
					</view>
					<view class="insight-row">
						<view class="error-icon"></view>
						<text class="insight-text">高频问题：鉴别诊断深度不足</text>
						<view class="chevron-icon"></view>
					</view>
				</view>

				<view class="dashboard-card insight-card">
					<view class="insight-title">
						<view class="sparkle-icon"></view>
						<text>个性化训练推荐</text>
					</view>
					<view class="insight-row">
						<view class="notes-icon"></view>
						<text class="insight-text">今日挑战：复杂COPD急性加重期</text>
						<view class="chevron-icon"></view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup lang="ts">
const emit = defineEmits<{
	(event: 'open-settings'): void
	(event: 'go-home'): void
}>()

const heatTones = [
	'heat-low',
	'heat-high',
	'heat-empty',
	'heat-mid',
	'heat-low',
	'heat-high',
	'heat-empty',
	'heat-mid',
	'heat-low',
	'heat-high'
]
</script>

<style scoped>
page {
	min-height: 100%;
	background: #eaf3ff;
}

.profile-page {
	width: 390px;
	max-width: 100vw;
	min-height: 884px;
	margin: 0 auto;
	padding-bottom: 40px;
	background: #eaf3ff;
	color: #191c21;
	font-family: Inter, -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
	-webkit-tap-highlight-color: transparent;
}

.profile-page view,
.profile-page text,
.profile-page button,
.profile-page scroll-view {
	box-sizing: border-box;
}

.top-app-bar {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	z-index: 50;
	width: 100%;
	height: 56px;
	padding: 0 16px;
	border-bottom: 1px solid rgba(194, 198, 212, 0.3);
	background: #ffffff;
	box-shadow: 0 2px 8px rgba(25, 28, 33, 0.04);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.nav-left {
	display: flex;
	align-items: center;
}

.icon-button {
	width: 40px;
	height: 40px;
	min-height: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
}

.icon-button::after {
	border: 0;
}

.home-button {
	margin-left: 4px;
}

.settings-icon,
.home-icon,
.account-icon,
.verified-icon,
.emergency-icon,
.psychology-icon,
.error-icon,
.chevron-icon,
.sparkle-icon,
.notes-icon {
	background: #424752;
}

.account-icon.active {
	background: #5b9bd5;
}

.settings-icon,
.verified-icon,
.emergency-icon,
.psychology-icon,
.error-icon,
.chevron-icon,
.sparkle-icon,
.notes-icon {
	width: 18px;
	height: 18px;
}

.settings-icon {
	width: 22px;
	height: 22px;
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M19.43%2012.98c.04-.32.07-.65.07-.98s-.02-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.37-.31-.6-.22l-2.49%201c-.52-.4-1.08-.73-1.69-.98L14.5%202.42C14.47%202.18%2014.25%202%2014%202h-4c-.25%200-.46.18-.5.42l-.38%202.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.08-.48%200-.6.22l-2%203.46c-.13.22-.07.49.12.64l2.11%201.65c-.04.32-.08.65-.08.98s.03.66.08.98l-2.11%201.65c-.19.15-.24.42-.12.64l2%203.46c.12.22.37.31.6.22l2.49-1c.52.4%201.08.73%201.69.98l.38%202.65c.04.24.25.42.5.42h4c.25%200%20.46-.18.5-.42l.38-2.65c.61-.25%201.17-.58%201.69-.98l2.49%201c.23.08.48%200%20.6-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12%2015.5A3.5%203.5%200%201%201%2012%208a3.5%203.5%200%200%201%200%207.5z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M19.43%2012.98c.04-.32.07-.65.07-.98s-.02-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.37-.31-.6-.22l-2.49%201c-.52-.4-1.08-.73-1.69-.98L14.5%202.42C14.47%202.18%2014.25%202%2014%202h-4c-.25%200-.46.18-.5.42l-.38%202.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.08-.48%200-.6.22l-2%203.46c-.13.22-.07.49.12.64l2.11%201.65c-.04.32-.08.65-.08.98s.03.66.08.98l-2.11%201.65c-.19.15-.24.42-.12.64l2%203.46c.12.22.37.31.6.22l2.49-1c.52.4%201.08.73%201.69.98l.38%202.65c.04.24.25.42.5.42h4c.25%200%20.46-.18.5-.42l.38-2.65c.61-.25%201.17-.58%201.69-.98l2.49%201c.23.08.48%200%20.6-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12%2015.5A3.5%203.5%200%201%201%2012%208a3.5%203.5%200%200%201%200%207.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.home-icon,
.account-icon {
	width: 24px;
	height: 24px;
}

.home-icon {
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M10%2020v-6h4v6h5v-8h3L12%203%202%2012h3v8h5z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M10%2020v-6h4v6h5v-8h3L12%203%202%2012h3v8h5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.account-icon {
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M12%202a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20zm0%203a3.5%203.5%200%201%201%200%207%203.5%203.5%200%200%201%200-7zm0%2015a8%208%200%200%201-6.4-3.2c1.18-2.02%203.57-3.3%206.4-3.3s5.22%201.28%206.4%203.3A8%208%200%200%201%2012%2020z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M12%202a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20zm0%203a3.5%203.5%200%201%201%200%207%203.5%203.5%200%200%201%200-7zm0%2015a8%208%200%200%201-6.4-3.2c1.18-2.02%203.57-3.3%206.4-3.3s5.22%201.28%206.4%203.3A8%208%200%200%201%2012%2020z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.dashboard {
	width: 390px;
	height: 884px;
	padding: 80px 16px 40px;
}

.dashboard-card {
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 16px;
	background: #ffffff;
	box-shadow: 0 4px 20px -2px rgba(91, 155, 213, 0.1);
}

.profile-card {
	padding: 12px;
	display: flex;
	align-items: center;
	gap: 16px;
}

.avatar-wrap {
	position: relative;
	flex: 0 0 auto;
}

.avatar-image {
	width: 64px;
	height: 64px;
	border: 4px solid rgba(91, 155, 213, 0.2);
	border-radius: 50%;
}

.level-badge {
	position: absolute;
	right: 0;
	bottom: 0;
	padding: 2px 8px;
	border: 2px solid #ffffff;
	border-radius: 999px;
	background: #f05a23;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
	color: #ffffff;
	font-size: 10px;
	line-height: 12px;
	font-weight: 700;
}

.profile-copy {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.name-row {
	margin-bottom: 4px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.doctor-name {
	max-width: 112px;
	color: #191c21;
	font-size: 20px;
	line-height: 28px;
	font-weight: 800;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.level-chip {
	flex: 0 0 auto;
	padding: 2px 8px;
	border-radius: 999px;
	background: #dcebfa;
	color: #004f54;
	font-size: 12px;
	line-height: 16px;
	font-weight: 500;
}

.honor-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	color: #424752;
	font-size: 11px;
	line-height: 16px;
}

.honor-item {
	display: flex;
	align-items: center;
	gap: 4px;
}

.verified-icon {
	width: 14px;
	height: 14px;
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='m12%202%202.4%202.8%203.7-.7.7%203.7%202.8%202.4-2.8%202.4-.7%203.7-3.7-.7L12%2022l-2.4-2.8-3.7.7-.7-3.7L2.4%2014l2.8-2.4.7-3.7%203.7.7L12%202zm-1%2014.2%206-6-1.4-1.4L11%2013.4l-2.6-2.6L7%2012.2l4%204z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='m12%202%202.4%202.8%203.7-.7.7%203.7%202.8%202.4-2.8%202.4-.7%203.7-3.7-.7L12%2022l-2.4-2.8-3.7.7-.7-3.7L2.4%2014l2.8-2.4.7-3.7%203.7.7L12%202zm-1%2014.2%206-6-1.4-1.4L11%2013.4l-2.6-2.6L7%2012.2l4%204z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.emergency-icon {
	width: 14px;
	height: 14px;
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M12%202 3%205v6c0%205.55%203.84%2010.74%209%2012%205.16-1.26%209-6.45%209-12V5l-9-3zm1%2015h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M12%202 3%205v6c0%205.55%203.84%2010.74%209%2012%205.16-1.26%209-6.45%209-12V5l-9-3zm1%2015h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.divider {
	color: #c2c6d4;
}

.metrics-grid,
.two-col {
	margin-top: 8px;
	display: grid;
	gap: 8px;
}

.metrics-grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.two-col {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.metric-card {
	min-height: 72px;
	padding: 8px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.metric-label {
	margin-bottom: 4px;
	color: #424752;
	font-size: 12px;
	line-height: 16px;
	font-weight: 500;
}

.metric-inline {
	display: flex;
	align-items: baseline;
	gap: 4px;
}

.metric-value {
	color: #5b9bd5;
	font-size: 20px;
	line-height: 24px;
	font-weight: 700;
}

.metric-top {
	color: #22c55e;
	font-size: 8px;
	line-height: 10px;
	font-weight: 700;
}

.compact-card {
	min-height: 150px;
	padding: 8px;
	display: flex;
	flex-direction: column;
}

.card-title {
	margin-bottom: 8px;
	color: #5b9bd5;
	font-size: 14px;
	line-height: 20px;
	font-weight: 700;
}

.radar-box {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	margin: 0 auto;
}

.mini-radar {
	width: 100%;
	height: 100%;
}

.radar-label {
	position: absolute;
	left: 50%;
	transform: translateX(-50%) scale(0.9);
	font-size: 10px;
	line-height: 12px;
	white-space: nowrap;
}

.radar-label.top {
	top: 0;
}

.radar-label.bottom {
	bottom: 0;
}

.card-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.segmented {
	transform: scale(0.65);
	transform-origin: right top;
	padding: 2px;
	border-radius: 2px;
	background: #dcebfa;
	display: flex;
}

.seg {
	padding: 2px 4px;
	color: rgba(91, 155, 213, 0.6);
	font-size: 8px;
	line-height: 10px;
}

.seg.active {
	border-radius: 2px;
	background: #ffffff;
	color: #5b9bd5;
	font-weight: 600;
}

.trend-bars {
	flex: 1;
	height: 64px;
	margin-top: auto;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 4px;
}

.trend-bar {
	flex: 1;
	border-radius: 2px 2px 0 0;
}

.tone-1 {
	height: 40%;
	background: rgba(91, 155, 213, 0.2);
}

.tone-2 {
	height: 60%;
	background: rgba(91, 155, 213, 0.4);
}

.tone-3 {
	height: 80%;
	background: #5b9bd5;
}

.tone-4 {
	height: 70%;
	background: rgba(91, 155, 213, 0.7);
}

.heat-grid {
	margin-bottom: 8px;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 4px;
}

.heat-cell {
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 1px;
}

.heat-low {
	background: rgba(91, 155, 213, 0.3);
}

.heat-mid {
	background: rgba(91, 155, 213, 0.6);
}

.heat-high {
	background: #5b9bd5;
}

.heat-empty {
	background: #f3f4f6;
}

.heat-legend {
	margin-top: auto;
	display: flex;
	justify-content: space-between;
	color: rgba(66, 71, 82, 0.6);
	font-size: 7px;
	line-height: 10px;
}

.specialty-list {
	margin-top: 4px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.specialty-head {
	display: flex;
	justify-content: space-between;
	font-size: 8px;
	line-height: 12px;
}

.percent {
	color: #5b9bd5;
}

.mini-track {
	width: 100%;
	height: 4px;
	border-radius: 999px;
	background: #f3f4f6;
	overflow: hidden;
}

.mini-fill {
	height: 100%;
	background: #5b9bd5;
}

.fill-91 {
	width: 91%;
}

.fill-88 {
	width: 88%;
}

.insight-stack {
	margin-top: 8px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-bottom: 16px;
}

.insight-card {
	padding: 12px;
	border-left: 4px solid #5b9bd5;
}

.insight-title {
	margin-bottom: 12px;
	display: flex;
	align-items: center;
	gap: 8px;
	color: #5b9bd5;
	font-size: 14px;
	line-height: 20px;
	font-weight: 700;
}

.psychology-icon,
.sparkle-icon {
	background: #5b9bd5;
}

.psychology-icon {
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M13%203a8%208%200%200%200-8%208v3.5L3%2018h3v3h7v-3h1a7%207%200%200%200%207-7%208%208%200%200%200-8-8zm-2%2011H9v-2h2v2zm4%200h-2v-2h2v2zm-4-4H9V8h2v2zm4%200h-2V8h2v2z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M13%203a8%208%200%200%200-8%208v3.5L3%2018h3v3h7v-3h1a7%207%200%200%200%207-7%208%208%200%200%200-8-8zm-2%2011H9v-2h2v2zm4%200h-2v-2h2v2zm-4-4H9V8h2v2zm4%200h-2V8h2v2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.sparkle-icon {
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='m19%209%201.25-2.75L23%205l-2.75-1.25L19%201l-1.25%202.75L15%205l2.75%201.25L19%209zm-7.5.5L9%204%206.5%209.5%201%2012l5.5%202.5L9%2020l2.5-5.5L17%2012l-5.5-2.5z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='m19%209%201.25-2.75L23%205l-2.75-1.25L19%201l-1.25%202.75L15%205l2.75%201.25L19%209zm-7.5.5L9%204%206.5%209.5%201%2012l5.5%202.5L9%2020l2.5-5.5L17%2012l-5.5-2.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.insight-row {
	padding: 12px;
	border-radius: 12px;
	background: #dcebfa;
	box-shadow: 0 2px 8px rgba(91, 155, 213, 0.12);
	color: #004f54;
	display: flex;
	align-items: center;
	gap: 12px;
}

.error-icon,
.notes-icon {
	background: #5b9bd5;
	width: 16px;
	height: 16px;
}

.error-icon {
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M11%2015h2v2h-2v-2zm0-8h2v6h-2V7zm1-5a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M11%2015h2v2h-2v-2zm0-8h2v6h-2V7zm1-5a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.notes-icon {
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M19%203h-1V1h-2v2H8V1H6v2H5a2%202%200%200%200-2%202v14a2%202%200%200%200%202%202h14a2%202%200%200%200%202-2V5a2%202%200%200%200-2-2zM8%207h8v2H8V7zm0%204h8v2H8v-2zm0%204h5v2H8v-2z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M19%203h-1V1h-2v2H8V1H6v2H5a2%202%200%200%200-2%202v14a2%202%200%200%200%202%202h14a2%202%200%200%200%202-2V5a2%202%200%200%200-2-2zM8%207h8v2H8V7zm0%204h8v2H8v-2zm0%204h5v2H8v-2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.insight-text {
	flex: 1;
	font-size: 14px;
	line-height: 20px;
	font-weight: 700;
}

.chevron-icon {
	width: 16px;
	height: 16px;
	background: #c2c6d4;
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='m10%206-1.41%201.41L13.17%2012l-4.58%204.59L10%2018l6-6-6-6z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='m10%206-1.41%201.41L13.17%2012l-4.58%204.59L10%2018l6-6-6-6z'/%3E%3C/svg%3E") center / contain no-repeat;
}
</style>
