Add pictogram icons for chief complaints and make symptom selector image-friendly

frontend/public/triage/abdomen.svg

@@ -0,0 +1,5 @@
+<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="8" y="12" width="80" height="72" rx="20" fill="#FEF3C7"/>
+  <rect x="32" y="28" width="32" height="40" rx="16" fill="#F59E0B"/>
+  <rect x="36" y="40" width="24" height="16" rx="8" fill="#FDBA74"/>
+</svg>

frontend/public/triage/chest.svg

@@ -0,0 +1,4 @@
+<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="8" y="12" width="80" height="72" rx="20" fill="#FEE2E2"/>
+  <path d="M48 64C48 64 34 55 34 44C34 38.477 38.477 34 44 34C47.018 34 49.853 35.39 51.5 37.667C53.147 35.39 55.982 34 59 34C64.523 34 69 38.477 69 44C69 55 55 64 55 64L51.5 66.3333L48 64Z" fill="#DC2626"/>
+</svg>

frontend/public/triage/general.svg

@@ -0,0 +1,5 @@
+<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="8" y="12" width="80" height="72" rx="20" fill="#ECFEFF"/>
+  <circle cx="48" cy="40" r="10" fill="#14B8A6"/>
+  <path d="M32 66C34.5 58.5 40.5 54 48 54C55.5 54 61.5 58.5 64 66" stroke="#14B8A6" stroke-width="4" stroke-linecap="round"/>
+</svg>

frontend/public/triage/head.svg

@@ -0,0 +1,6 @@
+<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="8" y="12" width="80" height="72" rx="20" fill="#DBEAFE"/>
+  <circle cx="48" cy="40" r="16" fill="#60A5FA"/>
+  <rect x="40" y="52" width="16" height="16" rx="8" fill="#93C5FD"/>
+  <path d="M40 34L56 46" stroke="white" stroke-width="3" stroke-linecap="round"/>
+</svg>

frontend/public/triage/trauma.svg

@@ -0,0 +1,6 @@
+<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="8" y="12" width="80" height="72" rx="20" fill="#E0F2FE"/>
+  <path d="M24 60L40 32L52 48L64 28L72 44" stroke="#0EA5E9" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+  <circle cx="40" cy="32" r="4" fill="#0EA5E9"/>
+  <circle cx="64" cy="28" r="4" fill="#0EA5E9"/>
+</svg>

frontend/src/components/SymptomSelector.vue

@@ -4,6 +4,7 @@ const modelValue = defineModel<string | null>()
 interface QuestionOption {
   value: string
   label: string
+  icon?: string
 }
 
 const props = defineProps<{
@@ -28,7 +29,10 @@ function select(value: string) {
         :class="{ active: opt.value === modelValue }"
         @click="select(opt.value)"
       >
-        {{ opt.label }}
+        <span class="icon-wrapper" v-if="opt.icon">
+          <img :src="opt.icon" :alt="opt.label" class="icon" />
+        </span>
+        <span class="label">{{ opt.label }}</span>
       </button>
     </div>
   </div>
@@ -47,7 +51,7 @@ h2 {
 }
 
 .symptom-btn {
-  padding: 0.85rem 0.75rem;
+  padding: 0.75rem 0.75rem;
   border-radius: 18px;
   border: 1px solid #e5e7eb;
   background: #f9fafb;
@@ -55,10 +59,31 @@ h2 {
   font-size: 0.95rem;
   color: #111827;
   cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
   transition: background 0.12s ease-out, border-color 0.12s ease-out, box-shadow 0.12s ease-out,
     transform 0.08s ease-out;
 }
 
+.icon-wrapper {
+  flex-shrink: 0;
+  width: 44px;
+  height: 44px;
+  border-radius: 14px;
+  overflow: hidden;
+}
+
+.icon {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.label {
+  flex: 1;
+}
+
 .symptom-btn:hover {
   background: #f3f4f6;
 }

frontend/src/composables/useTriageSession.ts

@@ -5,6 +5,7 @@ const API_BASE_URL = import.meta.env.VITE_API_BASE_URL ?? 'http://localhost:8000
 export interface QuestionOption {
   value: string
   label: string
+  icon?: string
 }
 
 export interface Question {