<!--
  PocketPaw Dashboard - Chat Component

  Changes (2026-02-03):
  - Extracted from monolithic index.html
  - Added responsive message widths: max-w-[85%] mobile, max-w-[70%] desktop
  - Responsive padding and font sizes
  - Fixed input area positioning for mobile
-->
<!-- Chat View -->
<!-- Added explicit min-height-0 to allow flex child to shrink properly -->
<div class="flex-1 flex flex-col pt-20 overflow-hidden min-h-0" x-show="view === 'chat'">
<div class="messages flex-1 flex flex-col gap-6 overflow-y-auto p-4 md:p-8 min-h-0" x-ref="messages">
    <template x-for="(msg, index) in messages" :key="index">
    <!-- Message Item -->
    <div class="flex flex-col gap-1.5 max-w-[85%] md:max-w-[70%] animate-[messageSlide_0.3s_ease-out]" :class="msg.role === 'user' ? 'self-end items-end' : 'self-start items-start'">
        <div
        class="px-4 py-3 md:px-5 md:py-3.5 rounded-2xl text-[14px] md:text-[15px] leading-relaxed shadow-sm relative break-words message-content-wrapper"
        :class="msg.role === 'user' ? 'bg-[var(--accent-color)] text-white rounded-br-sm' : 'bg-[var(--card-bg)] border border-[var(--glass-border)] rounded-bl-sm'"
        x-html="formatMessage(msg.content)"
        ></div>
        <div class="flex gap-2 items-center px-1 opacity-70" :class="msg.role === 'user' ? 'flex-row-reverse' : ''">
        <span
            class="text-[11px] md:text-xs font-semibold text-[var(--text-secondary)]"
            x-text="msg.role === 'user' ? '' : 'PocketPaw'"
            x-show="msg.role !== 'user'"
        ></span>
        <span class="text-[10px] md:text-[11px] text-[var(--text-tertiary)]" x-text="msg.time"></span>
        </div>
    </div>
    </template>

    <!-- Streaming indicator -->
    <div class="flex flex-col gap-1.5 max-w-[85%] md:max-w-[70%] self-start items-start" x-show="isStreaming">
    <div class="px-4 py-3 md:px-5 md:py-3.5 rounded-2xl text-[14px] md:text-[15px] leading-relaxed shadow-sm relative bg-[var(--card-bg)] border border-[var(--glass-border)] rounded-bl-sm">
        <span x-text="streamingContent"></span>
        <span class="animate-pulse font-bold">▌</span>
    </div>
    <div class="flex gap-2 items-center px-1 opacity-70">
        <span class="text-[11px] md:text-xs font-semibold text-[var(--text-secondary)]">PocketPaw</span>
        <span class="text-[10px] md:text-[11px] text-[var(--text-tertiary)]" x-text="currentTime()"></span>
    </div>
    </div>
    
    <!-- Spacer for fixed input area -->
    <div class="h-20"></div>
</div>

<!-- Floating Input Area -->
<div class="absolute bottom-4 left-3 right-3 md:bottom-8 md:left-[10%] md:right-[10%] z-20">
    <form class="relative flex items-center bg-[#2c2c2e]/90 backdrop-blur-xl border border-[var(--glass-border)] rounded-[24px] shadow-2xl transition-all focus-within:ring-1 focus-within:ring-white/20 focus-within:bg-[#323234]" @submit.prevent="sendMessage()">
    <input
        type="text"
        class="w-full bg-transparent border-none text-[15px] text-white placeholder-white/30 px-5 py-4 pr-14 rounded-[24px] focus:outline-none focus:ring-0"
        placeholder="Type a message..."
        x-model="inputText"
        :disabled="isStreaming"
    />
    <button
        type="submit"
        class="absolute right-2 top-1/2 -translate-y-1/2 w-8 h-8 md:w-9 md:h-9 bg-[var(--accent-color)] hover:bg-[var(--accent-hover)] text-white rounded-full flex items-center justify-center transition-all disabled:opacity-50 disabled:cursor-not-allowed shadow-lg hover:shadow-[0_0_15px_rgba(10,132,255,0.4)] hover:scale-105 active:scale-95"
        :disabled="!inputText.trim() || isStreaming"
    >
        <i data-lucide="arrow-up" class="w-4 h-4 md:w-5 md:h-5"></i>
    </button>
    </form>
</div>
</div>
