@foreach($messages as $msg)
    @php
        $isMe = ($msg->sender_id == $studentId);
    @endphp
    
    <div class="flex {{ $isMe ? 'justify-end' : 'justify-start' }}">
        <div class="flex items-end gap-2 {{ $isMe ? 'flex-row-reverse' : 'flex-row' }}">
            <!-- Avatar: Student = Self, Everyone else = School -->
            <div class="w-8 h-8 rounded-full overflow-hidden flex-shrink-0 border border-slate-300 flex items-center justify-center {{ $isMe ? 'bg-indigo-100' : 'bg-indigo-600' }}">
                @if($isMe)
                                       <img src="https://ui-avatars.com/api/?name={{ $studentName }}&background=random" class="w-full h-full object-cover">
                @else
                    <span class="text-white font-bold text-xs">S</span>
                @endif
            </div>
            
            <!-- Message Bubble -->
            <div class="max-w-[70%] p-3 rounded-2xl text-sm leading-relaxed {{ $isMe ? 'rounded-br-none bg-indigo-600 text-white shadow-md' : 'rounded-bl-none bg-white border border-slate-200 shadow-sm text-slate-700' }}">
                
                @if(Str::startsWith($msg->message, 'http'))
                    @if(Str::contains($msg->message, ['jpg', 'jpeg', 'png', 'gif', 'webp']))
                        <a href="{{ $msg->message }}" target="_blank" class="block mb-1">
                            <img src="{{ $msg->message }}" class="max-w-full h-auto rounded-lg {{ $isMe ? 'border border-white/20' : 'border border-slate-200' }}">
                        </a>
                    @else
                        <a href="{{ $msg->message }}" target="_blank" class="flex items-center gap-2 hover:underline {{ $isMe ? 'text-white' : 'text-slate-700' }}">
                            <i class="fa-solid fa-file-arrow-down"></i>
                            <span class="truncate max-w-[150px]">Download Attachment</span>
                        </a>
                    @endif
                @else
                    {{ $msg->message }}
                @endif

                <span class="block text-[9px] {{ $isMe ? 'text-indigo-200' : 'text-slate-400' }} mt-1 text-right">
                    {{ \Carbon\Carbon::parse($msg->created_at)->format('h:i A') }}
                </span>
            </div>
        </div>
    </div>
@endforeach