ShitPost

<!-- Top Bar Button Gradient -->
<linearGradient id="btn-bg" x1="0" y1="0" x2="0" y2="1">
  <stop offset="0%" stop-color="#7993b1" />
  <stop offset="50%" stop-color="#4c6c92" />
  <stop offset="51%" stop-color="#3b5e87" />
  <stop offset="100%" stop-color="#31527a" />
</linearGradient>

<!-- Incoming Glossy Bubble Gradient (White/Grey) -->
<linearGradient id="msg-in" x1="0" y1="0" x2="0" y2="1">
  <stop offset="0%" stop-color="#ffffff" />
  <stop offset="48%" stop-color="#f5f5f5" />
  <stop offset="50%" stop-color="#e3e3e3" />
  <stop offset="100%" stop-color="#d9d9d9" />
</linearGradient>

<!-- Outgoing Glossy Bubble Gradient (iOS Classic Blue with hard stop) -->
<linearGradient id="msg-out" x1="0" y1="0" x2="0" y2="1">
  <stop offset="0%" stop-color="#d4ebfd" />
  <stop offset="48%" stop-color="#aecdf4" />
  <stop offset="50%" stop-color="#8ebcf0" />
  <stop offset="100%" stop-color="#72aaf0" />
</linearGradient>

<!-- Drop Shadow for Bubbles -->
<filter id="shadow" x="-10%" y="-10%" width="120%" height="120%">
  <feDropShadow dx="0" dy="1" stdDeviation="1" flood-color="#000000" flood-opacity="0.2" />
</filter>

<!-- Message 1: Incoming (White) -->
<path d="M 41 60 H 124 A 15 15 0 0 1 139 75 V 85 A 15 15 0 0 1 124 100 H 41 C 30 100 18 103 8 108 C 16 100 22 93 25 84 V 75 A 15 15 0 0 1 41 60 Z" fill="url(#msg-in)" stroke="#b5b5b5" stroke-width="1" />
<text x="42" y="85" font-family="-apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="18" fill="#000000" font-weight="500" letter-spacing="-0.3">What's up?</text>

<!-- Message 2: Outgoing (Blue) -->
<path d="M 121 120 H 369 A 15 15 0 0 1 384 135 V 245 C 384 254 391 260 399 264 C 389 261 379 260 369 260 H 121 A 15 15 0 0 1 106 245 V 135 A 15 15 0 0 1 121 120 Z" fill="url(#msg-out)" stroke="#6a9ad1" stroke-width="1" />
<text x="118" y="143" font-family="-apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="18" fill="#000000" font-weight="500" letter-spacing="-0.3">
  <tspan x="118" dy="0">Dude, you're going to</tspan>
  <tspan x="118" dy="22">kill me. I was a little</tspan>
  <tspan x="118" dy="22">drunk last night and</tspan>
  <tspan x="118" dy="22">talking to your wife and I</tspan>
  <tspan x="118" dy="22">ended up banging her</tspan>
</text>

<!-- Message 3: Outgoing (Blue) -->
<path d="M 111 275 H 339 A 15 15 0 0 1 354 290 V 415 C 354 424 361 430 369 434 C 359 431 349 430 339 430 H 111 A 15 15 0 0 1 96 415 V 290 A 15 15 0 0 1 111 275 Z" fill="url(#msg-out)" stroke="#6a9ad1" stroke-width="1" />
<text x="108" y="298" font-family="-apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="18" fill="#000000" font-weight="500" letter-spacing="-0.3">
  <tspan x="108" dy="0">car in the driveway</tspan>
  <tspan x="108" dy="22">when I pulled out. I think</tspan>
  <tspan x="108" dy="22">I hit your daughter's</tspan>
  <tspan x="108" dy="22">bike too. I'll come fix it</tspan>
  <tspan x="108" dy="22">later, but please say</tspan>
  <tspan x="108" dy="22">sorry for me to your wife</tspan>
</text>

<!-- Message 4: Outgoing (Blue) -->
<path d="M 221 465 H 369 A 15 15 0 0 1 384 480 V 490 C 384 499 391 505 399 509 C 389 506 379 505 369 505 H 221 A 15 15 0 0 1 206 490 V 480 A 15 15 0 0 1 221 465 Z" fill="url(#msg-out)" stroke="#6a9ad1" stroke-width="1" />
<text x="218" y="490" font-family="-apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="18" fill="#000000" font-weight="500" letter-spacing="-0.3">and your daughter</text>

<!-- Back Button -->
<path d="M 30 7 L 85 7 C 87.5 7 89 8.5 89 11 L 89 31 C 89 33.5 87.5 35 85 35 L 30 35 L 11 22 C 10 21 10 20 11 19 L 30 7 Z" fill="url(#btn-bg)" stroke="#273f5d" stroke-width="1" />
<text x="52" y="25" font-family="-apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="12" font-weight="bold" fill="#000000" opacity="0.6" text-anchor="middle">Messages</text>
<text x="52" y="24" font-family="-apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="12" font-weight="bold" fill="#ffffff" text-anchor="middle">Messages</text>

<!-- Title -->
<text x="200" y="27" font-family="-apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="20" font-weight="bold" fill="#000000" opacity="0.5" text-anchor="middle">John</text>
<text x="200" y="26" font-family="-apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="20" font-weight="bold" fill="#ffffff" text-anchor="middle">John</text>

<!-- Edit Button -->
<rect x="325" y="7" width="65" height="28" rx="5" fill="url(#btn-bg)" stroke="#273f5d" stroke-width="1" />
<text x="357.5" y="25" font-family="-apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="12" font-weight="bold" fill="#000000" opacity="0.6" text-anchor="middle">Edit</text>
<text x="357.5" y="24" font-family="-apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="12" font-weight="bold" fill="#ffffff" text-anchor="middle">Edit</text>