// 聊天背景涂鸦图案
// 使用 SVG data URI 实现 Telegram 风格的涂鸦背景
// 更大的画布 + 随机分布 + 不同大小和角度

// 浅色模式涂鸦图案
$pattern-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:none;stroke:%23000;stroke-width:1.2;opacity:0.045%7D.b%7Bfill:none;stroke:%23000;stroke-width:1;opacity:0.035%7D.c%7Bfill:none;stroke:%23000;stroke-width:0.8;opacity:0.04%7D%3C/style%3E%3C/defs%3E%3Cg transform='translate(45,35) rotate(-8)'%3E%3Ccircle class='a' cx='0' cy='0' r='16'/%3E%3Ccircle class='a' cx='-5' cy='-4' r='2.5'/%3E%3Ccircle class='a' cx='5' cy='-4' r='2.5'/%3E%3Cpath class='a' d='M-8 4 Q0 12 8 4'/%3E%3C/g%3E%3Cg transform='translate(320,28) rotate(15) scale(0.7)'%3E%3Cpath class='b' d='M0 -12 l3 9 9 0 -7 5 3 9 -8 -6 -8 6 3 -9 -7 -5 9 0z'/%3E%3C/g%3E%3Cg transform='translate(180,55) rotate(12)'%3E%3Cpath class='a' d='M0 -8 C0 -14 8 -17 12 -10 C16 -17 24 -14 24 -8 C24 4 12 14 12 14 C12 14 0 4 0 -8'/%3E%3C/g%3E%3Cg transform='translate(95,120) rotate(-5) scale(1.1)'%3E%3Cpath class='b' d='M0 10 Q-8 10 -8 3 Q-8 -4 0 -4 Q0 -12 10 -12 Q22 -12 22 -2 Q30 -2 30 5 Q30 12 22 12 Z'/%3E%3C/g%3E%3Cg transform='translate(355,95) rotate(8)'%3E%3Cpath class='c' d='M0 0 L0 18 M0 0 L18 -4 L18 14'/%3E%3Cellipse class='c' cx='-4' cy='20' rx='6' ry='4'/%3E%3Cellipse class='c' cx='14' cy='16' rx='6' ry='4'/%3E%3C/g%3E%3Cg transform='translate(250,110) rotate(-12) scale(0.9)'%3E%3Crect class='b' x='0' y='0' width='26' height='18' rx='2'/%3E%3Cpath class='b' d='M0 2 L13 11 L26 2'/%3E%3C/g%3E%3Cg transform='translate(28,195) rotate(6)'%3E%3Ccircle class='a' cx='0' cy='0' r='11'/%3E%3Cpath class='a' d='M-5 11 L5 11 M-4 14 L4 14'/%3E%3Cpath class='c' d='M-3 -2 L0 -6 L3 -2'/%3E%3C/g%3E%3Cg transform='translate(155,175) rotate(-3) scale(0.85)'%3E%3Cpath class='b' d='M0 0 L0 28 Q14 22 28 28 L28 0 Q14 6 0 0'/%3E%3Cpath class='b' d='M28 0 L28 28 Q42 22 56 28 L56 0 Q42 6 28 0'/%3E%3C/g%3E%3Cg transform='translate(340,185) rotate(-20) scale(1.2)'%3E%3Cpath class='a' d='M0 8 L20 0 L5 6 L8 14 L5 6 L-12 12 Z'/%3E%3C/g%3E%3Cg transform='translate(70,280) rotate(5)'%3E%3Crect class='b' x='0' y='5' width='30' height='22' rx='4'/%3E%3Ccircle class='b' cx='15' cy='16' r='7'/%3E%3Crect class='b' x='8' y='0' width='14' height='6' rx='2'/%3E%3C/g%3E%3Cg transform='translate(230,250) rotate(-8) scale(1.1)'%3E%3Crect class='a' x='0' y='6' width='22' height='18' rx='2'/%3E%3Crect class='a' x='-3' y='0' width='28' height='7' rx='2'/%3E%3Cpath class='a' d='M11 0 L11 24 M-3 13 L25 13'/%3E%3C/g%3E%3Cg transform='translate(365,280) rotate(10)'%3E%3Cellipse class='b' cx='0' cy='0' rx='10' ry='14'/%3E%3Cpath class='b' d='M0 14 Q-3 20 0 28 Q2 24 -1 20'/%3E%3C/g%3E%3Cg transform='translate(145,310) rotate(-6)'%3E%3Cpath class='c' d='M0 0 L4 28 L24 28 L28 0 Z'/%3E%3Cpath class='c' d='M28 6 Q40 6 40 16 Q40 24 28 24'/%3E%3Cpath class='c' d='M8 8 Q10 4 12 8'/%3E%3C/g%3E%3Cg transform='translate(310,340) rotate(5) scale(0.9)'%3E%3Cpath class='a' d='M0 8 L8 0 L24 0 L32 8 L16 28 Z'/%3E%3Cpath class='a' d='M8 0 L12 8 L0 8 M24 0 L20 8 L32 8 M12 8 L16 28 L20 8'/%3E%3C/g%3E%3Cg transform='translate(55,365) rotate(25) scale(1.15)'%3E%3Cpath class='a' d='M8 0 Q12 -14 16 0 L14 6 L18 12 L12 9 L6 12 L10 6 Z'/%3E%3Ccircle class='c' cx='12' cy='-2' r='2'/%3E%3C/g%3E%3Cg transform='translate(200,375) rotate(-4)'%3E%3Cpath class='b' d='M0 12 Q0 -8 24 -8 Q48 -8 48 12'/%3E%3Cpath class='c' d='M6 12 Q6 -2 24 -2 Q42 -2 42 12'/%3E%3Cpath class='c' d='M12 12 Q12 4 24 4 Q36 4 36 12'/%3E%3C/g%3E%3Cg transform='translate(380,375) rotate(-10)'%3E%3Ccircle class='a' cx='0' cy='0' r='8'/%3E%3Cpath class='c' d='M0 -14 L0 -10 M0 10 L0 14 M-14 0 L-10 0 M10 0 L14 0 M-10 -10 L-7 -7 M7 7 L10 10 M-10 10 L-7 7 M7 -7 L10 -10'/%3E%3C/g%3E%3Cg transform='translate(280,45) rotate(-15) scale(0.6)'%3E%3Cpath class='c' d='M0 -8 C0 -14 8 -17 12 -10 C16 -17 24 -14 24 -8 C24 4 12 14 12 14 C12 14 0 4 0 -8'/%3E%3C/g%3E%3Cg transform='translate(15,85) rotate(8) scale(0.6)'%3E%3Cpath class='c' d='M0 10 Q-8 10 -8 3 Q-8 -4 0 -4 Q0 -12 10 -12 Q22 -12 22 -2 Q30 -2 30 5 Q30 12 22 12 Z'/%3E%3C/g%3E%3Cg transform='translate(120,65) rotate(5) scale(0.8)'%3E%3Ccircle class='c' cx='0' cy='0' r='12'/%3E%3Cpath class='c' d='M-5 -3 L-3 -3'/%3E%3Ccircle class='c' cx='5' cy='-3' r='2'/%3E%3Cpath class='c' d='M-6 4 Q0 9 6 4'/%3E%3C/g%3E%3Cg transform='translate(390,145) rotate(-5)'%3E%3Cpath class='b' d='M0 0 Q0 -10 8 -10 Q16 -10 16 0 L18 8 L-2 8 Z'/%3E%3Ccircle class='b' cx='8' cy='10' r='3'/%3E%3Ccircle class='c' cx='8' cy='-12' r='2'/%3E%3C/g%3E%3Cg transform='translate(20,320) rotate(20)'%3E%3Ccircle class='b' cx='0' cy='0' r='10'/%3E%3Cpath class='b' d='M0 10 L0 30'/%3E%3Cpath class='c' d='M-7 -7 Q0 0 7 -7 M-7 0 Q0 7 7 0'/%3E%3C/g%3E%3Cg transform='translate(295,165) rotate(-3) scale(0.9)'%3E%3Ccircle class='b' cx='10' cy='10' r='12'/%3E%3Cpath class='b' d='M0 4 L4 -6 L8 4 M12 4 L16 -6 L20 4'/%3E%3Ccircle class='c' cx='6' cy='8' r='2'/%3E%3Ccircle class='c' cx='14' cy='8' r='2'/%3E%3Cpath class='c' d='M8 13 L10 15 L12 13'/%3E%3Cpath class='c' d='M-4 10 L2 12 M18 12 L24 10'/%3E%3C/g%3E%3Cg transform='translate(175,260) rotate(8)'%3E%3Cellipse class='b' cx='12' cy='6' rx='14' ry='10'/%3E%3Cpath class='b' d='M6 14 L6 26 L18 26 L18 14'/%3E%3Ccircle class='c' cx='8' cy='4' r='3'/%3E%3Ccircle class='c' cx='16' cy='2' r='2'/%3E%3C/g%3E%3Cg transform='translate(85,175) rotate(-12)'%3E%3Cpath class='b' d='M12 0 A12 12 0 1 1 12 24 A8 8 0 1 0 12 0'/%3E%3C/g%3E%3Cg transform='translate(340,235) rotate(10)'%3E%3Cpath class='a' d='M10 0 L4 12 L10 12 L4 24 L16 10 L10 10 Z'/%3E%3C/g%3E%3Cg transform='translate(15,250) rotate(-25)'%3E%3Cpath class='b' d='M0 20 Q0 0 20 0 Q0 8 0 20'/%3E%3Cpath class='c' d='M2 18 Q8 10 18 2'/%3E%3C/g%3E%3C/svg%3E");

// 深色模式涂鸦图案
$pattern-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:none;stroke:%23fff;stroke-width:1.2;opacity:0.055%7D.b%7Bfill:none;stroke:%23fff;stroke-width:1;opacity:0.045%7D.c%7Bfill:none;stroke:%23fff;stroke-width:0.8;opacity:0.05%7D%3C/style%3E%3C/defs%3E%3Cg transform='translate(45,35) rotate(-8)'%3E%3Ccircle class='a' cx='0' cy='0' r='16'/%3E%3Ccircle class='a' cx='-5' cy='-4' r='2.5'/%3E%3Ccircle class='a' cx='5' cy='-4' r='2.5'/%3E%3Cpath class='a' d='M-8 4 Q0 12 8 4'/%3E%3C/g%3E%3Cg transform='translate(320,28) rotate(15) scale(0.7)'%3E%3Cpath class='b' d='M0 -12 l3 9 9 0 -7 5 3 9 -8 -6 -8 6 3 -9 -7 -5 9 0z'/%3E%3C/g%3E%3Cg transform='translate(180,55) rotate(12)'%3E%3Cpath class='a' d='M0 -8 C0 -14 8 -17 12 -10 C16 -17 24 -14 24 -8 C24 4 12 14 12 14 C12 14 0 4 0 -8'/%3E%3C/g%3E%3Cg transform='translate(95,120) rotate(-5) scale(1.1)'%3E%3Cpath class='b' d='M0 10 Q-8 10 -8 3 Q-8 -4 0 -4 Q0 -12 10 -12 Q22 -12 22 -2 Q30 -2 30 5 Q30 12 22 12 Z'/%3E%3C/g%3E%3Cg transform='translate(355,95) rotate(8)'%3E%3Cpath class='c' d='M0 0 L0 18 M0 0 L18 -4 L18 14'/%3E%3Cellipse class='c' cx='-4' cy='20' rx='6' ry='4'/%3E%3Cellipse class='c' cx='14' cy='16' rx='6' ry='4'/%3E%3C/g%3E%3Cg transform='translate(250,110) rotate(-12) scale(0.9)'%3E%3Crect class='b' x='0' y='0' width='26' height='18' rx='2'/%3E%3Cpath class='b' d='M0 2 L13 11 L26 2'/%3E%3C/g%3E%3Cg transform='translate(28,195) rotate(6)'%3E%3Ccircle class='a' cx='0' cy='0' r='11'/%3E%3Cpath class='a' d='M-5 11 L5 11 M-4 14 L4 14'/%3E%3Cpath class='c' d='M-3 -2 L0 -6 L3 -2'/%3E%3C/g%3E%3Cg transform='translate(155,175) rotate(-3) scale(0.85)'%3E%3Cpath class='b' d='M0 0 L0 28 Q14 22 28 28 L28 0 Q14 6 0 0'/%3E%3Cpath class='b' d='M28 0 L28 28 Q42 22 56 28 L56 0 Q42 6 28 0'/%3E%3C/g%3E%3Cg transform='translate(340,185) rotate(-20) scale(1.2)'%3E%3Cpath class='a' d='M0 8 L20 0 L5 6 L8 14 L5 6 L-12 12 Z'/%3E%3C/g%3E%3Cg transform='translate(70,280) rotate(5)'%3E%3Crect class='b' x='0' y='5' width='30' height='22' rx='4'/%3E%3Ccircle class='b' cx='15' cy='16' r='7'/%3E%3Crect class='b' x='8' y='0' width='14' height='6' rx='2'/%3E%3C/g%3E%3Cg transform='translate(230,250) rotate(-8) scale(1.1)'%3E%3Crect class='a' x='0' y='6' width='22' height='18' rx='2'/%3E%3Crect class='a' x='-3' y='0' width='28' height='7' rx='2'/%3E%3Cpath class='a' d='M11 0 L11 24 M-3 13 L25 13'/%3E%3C/g%3E%3Cg transform='translate(365,280) rotate(10)'%3E%3Cellipse class='b' cx='0' cy='0' rx='10' ry='14'/%3E%3Cpath class='b' d='M0 14 Q-3 20 0 28 Q2 24 -1 20'/%3E%3C/g%3E%3Cg transform='translate(145,310) rotate(-6)'%3E%3Cpath class='c' d='M0 0 L4 28 L24 28 L28 0 Z'/%3E%3Cpath class='c' d='M28 6 Q40 6 40 16 Q40 24 28 24'/%3E%3Cpath class='c' d='M8 8 Q10 4 12 8'/%3E%3C/g%3E%3Cg transform='translate(310,340) rotate(5) scale(0.9)'%3E%3Cpath class='a' d='M0 8 L8 0 L24 0 L32 8 L16 28 Z'/%3E%3Cpath class='a' d='M8 0 L12 8 L0 8 M24 0 L20 8 L32 8 M12 8 L16 28 L20 8'/%3E%3C/g%3E%3Cg transform='translate(55,365) rotate(25) scale(1.15)'%3E%3Cpath class='a' d='M8 0 Q12 -14 16 0 L14 6 L18 12 L12 9 L6 12 L10 6 Z'/%3E%3Ccircle class='c' cx='12' cy='-2' r='2'/%3E%3C/g%3E%3Cg transform='translate(200,375) rotate(-4)'%3E%3Cpath class='b' d='M0 12 Q0 -8 24 -8 Q48 -8 48 12'/%3E%3Cpath class='c' d='M6 12 Q6 -2 24 -2 Q42 -2 42 12'/%3E%3Cpath class='c' d='M12 12 Q12 4 24 4 Q36 4 36 12'/%3E%3C/g%3E%3Cg transform='translate(380,375) rotate(-10)'%3E%3Ccircle class='a' cx='0' cy='0' r='8'/%3E%3Cpath class='c' d='M0 -14 L0 -10 M0 10 L0 14 M-14 0 L-10 0 M10 0 L14 0 M-10 -10 L-7 -7 M7 7 L10 10 M-10 10 L-7 7 M7 -7 L10 -10'/%3E%3C/g%3E%3Cg transform='translate(280,45) rotate(-15) scale(0.6)'%3E%3Cpath class='c' d='M0 -8 C0 -14 8 -17 12 -10 C16 -17 24 -14 24 -8 C24 4 12 14 12 14 C12 14 0 4 0 -8'/%3E%3C/g%3E%3Cg transform='translate(15,85) rotate(8) scale(0.6)'%3E%3Cpath class='c' d='M0 10 Q-8 10 -8 3 Q-8 -4 0 -4 Q0 -12 10 -12 Q22 -12 22 -2 Q30 -2 30 5 Q30 12 22 12 Z'/%3E%3C/g%3E%3Cg transform='translate(120,65) rotate(5) scale(0.8)'%3E%3Ccircle class='c' cx='0' cy='0' r='12'/%3E%3Cpath class='c' d='M-5 -3 L-3 -3'/%3E%3Ccircle class='c' cx='5' cy='-3' r='2'/%3E%3Cpath class='c' d='M-6 4 Q0 9 6 4'/%3E%3C/g%3E%3Cg transform='translate(390,145) rotate(-5)'%3E%3Cpath class='b' d='M0 0 Q0 -10 8 -10 Q16 -10 16 0 L18 8 L-2 8 Z'/%3E%3Ccircle class='b' cx='8' cy='10' r='3'/%3E%3Ccircle class='c' cx='8' cy='-12' r='2'/%3E%3C/g%3E%3Cg transform='translate(20,320) rotate(20)'%3E%3Ccircle class='b' cx='0' cy='0' r='10'/%3E%3Cpath class='b' d='M0 10 L0 30'/%3E%3Cpath class='c' d='M-7 -7 Q0 0 7 -7 M-7 0 Q0 7 7 0'/%3E%3C/g%3E%3Cg transform='translate(295,165) rotate(-3) scale(0.9)'%3E%3Ccircle class='b' cx='10' cy='10' r='12'/%3E%3Cpath class='b' d='M0 4 L4 -6 L8 4 M12 4 L16 -6 L20 4'/%3E%3Ccircle class='c' cx='6' cy='8' r='2'/%3E%3Ccircle class='c' cx='14' cy='8' r='2'/%3E%3Cpath class='c' d='M8 13 L10 15 L12 13'/%3E%3Cpath class='c' d='M-4 10 L2 12 M18 12 L24 10'/%3E%3C/g%3E%3Cg transform='translate(175,260) rotate(8)'%3E%3Cellipse class='b' cx='12' cy='6' rx='14' ry='10'/%3E%3Cpath class='b' d='M6 14 L6 26 L18 26 L18 14'/%3E%3Ccircle class='c' cx='8' cy='4' r='3'/%3E%3Ccircle class='c' cx='16' cy='2' r='2'/%3E%3C/g%3E%3Cg transform='translate(85,175) rotate(-12)'%3E%3Cpath class='b' d='M12 0 A12 12 0 1 1 12 24 A8 8 0 1 0 12 0'/%3E%3C/g%3E%3Cg transform='translate(340,235) rotate(10)'%3E%3Cpath class='a' d='M10 0 L4 12 L10 12 L4 24 L16 10 L10 10 Z'/%3E%3C/g%3E%3Cg transform='translate(15,250) rotate(-25)'%3E%3Cpath class='b' d='M0 20 Q0 0 20 0 Q0 8 0 20'/%3E%3Cpath class='c' d='M2 18 Q8 10 18 2'/%3E%3C/g%3E%3C/svg%3E");

// 导出 CSS 变量
:root {
  --chat-pattern: #{$pattern-light};
}

[data-mode="dark"] {
  --chat-pattern: #{$pattern-dark};
}