<!--
  Mudabbir Dashboard - Chat Component

  Changes (2026-02-12):
  - Fixed double bottom padding → flex-based input (no spacer hack)
  - Input area: gradient fade, aligned with messages, safe-area-inset
  - Agent toggle moved inside input pill
  - Reduced message gap (gap-6 → gap-2.5)
  - Responsive top padding (pt-16 md:pt-20)
  - Animation only on new messages (not session history)
  - Accessibility: aria-labels on input and toggle
  - Streaming indicator: min-height for stable sizing

  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-16 md:pt-20 overflow-hidden min-h-0"
  x-show="view === 'chat'"
>
  <div
    class="messages flex-1 flex flex-col gap-2.5 overflow-y-auto p-4 md:p-8 pb-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 max-w-[85%] md:max-w-[70%] min-w-0"
        :class="[msg.role === 'user' ? 'self-end items-end' : 'self-start items-start', msg.isNew === true ? 'animate-[messageSlide_0.3s_ease-out]' : '']"
      >
        <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 max-w-full 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' ? '' : 'Mudabbir'"
            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 max-w-[85%] md:max-w-[70%] min-w-0 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 max-w-full bg-[var(--card-bg)] border border-[var(--glass-border)] rounded-bl-sm message-content-wrapper min-h-[44px]"
      >
        <span
          x-show="streamingContent"
          x-html="formatMessage(streamingContent)"
        ></span>
        <span
          x-show="!streamingContent && isThinking"
          class="text-white/40 italic"
        >
          Thinking<span class="animate-pulse">...</span>
        </span>
        <span x-show="!streamingContent && !isThinking" class="text-white/40">
          Preparing response...
        </span>
        <span class="animate-pulse font-bold" aria-label="Streaming in progress">▌</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)]"
          >Mudabbir</span
        >
        <span
          class="text-[10px] md:text-[11px] text-[var(--text-tertiary)]"
          x-text="currentTime()"
        ></span>
      </div>
    </div>
  </div>

  <!-- Input Area — flex child, gradient fade, safe-area inset -->
  <div class="shrink-0 relative z-20">
    <div class="absolute inset-x-0 -top-8 h-8 bg-gradient-to-t from-black to-transparent pointer-events-none"></div>
    <div class="bg-black px-3 md:px-8 pb-2 md:pb-4 pt-1" style="padding-bottom: max(0.5rem, env(safe-area-inset-bottom))">
      <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()"
      >
        <!-- Agent Mode Toggle (inside pill) -->
        <label class="relative w-[36px] h-[20px] cursor-pointer ml-4 shrink-0" aria-label="Agent mode">
          <input
            type="checkbox"
            x-model="agentActive"
            @change="toggleAgent()"
            class="absolute opacity-0 w-0 h-0 peer"
          />
          <span
            class="absolute inset-0 bg-[#787880]/30 rounded-full transition-colors duration-300 peer-checked:bg-[var(--success-color)]"
          ></span>
          <span
            class="absolute left-0.5 top-0.5 w-[16px] h-[16px] bg-white rounded-full shadow-[0_1px_3px_rgba(0,0,0,0.2)] transition-transform duration-300 peer-checked:translate-x-[16px]"
          ></span>
        </label>
        <div class="w-px h-5 bg-white/10 mx-2 shrink-0"></div>

        <input
          type="text"
          class="flex-1 bg-transparent border-none text-[15px] text-white placeholder-white/30 py-4 pr-14 focus:outline-none focus:ring-0"
          placeholder="Type a message..."
          x-model="inputText"
          :disabled="isStreaming"
          aria-label="Chat message input"
        />
        <!-- Send button (hidden while streaming) -->
        <button
          x-show="!isStreaming"
          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()"
          aria-label="Send message"
        >
          <i data-lucide="arrow-up" class="w-4 h-4 md:w-5 md:h-5"></i>
        </button>
        <!-- Stop button (shown while streaming) -->
        <button
          x-show="isStreaming"
          type="button"
          @click="stopStreamingResponse()"
          class="absolute right-2 top-1/2 -translate-y-1/2 w-8 h-8 md:w-9 md:h-9 bg-red-600 hover:bg-red-500 text-white rounded-full flex items-center justify-center transition-all shadow-lg hover:shadow-[0_0_15px_rgba(239,68,68,0.4)] hover:scale-105 active:scale-95"
          aria-label="Stop response"
        >
          <i data-lucide="square" class="w-3.5 h-3.5 md:w-4 md:h-4"></i>
        </button>
      </form>
    </div>
  </div>
</div>
