<template>
  <div class="chat-pane flex flex-col h-full min-h-0">
    <div class="chat-frame flex-1 flex flex-col overflow-visible relative">
      <div class="content flex-1 min-h-0">
        <OverlayScrollbarsComponent class="messages h-full pb-4 flex flex-col gap-3 relative" :class="{ 'is-switching': isHidden }" :options="scrollbarOptions" ref="messagesEl" element="div">
            <!-- Previous sessions (server-fetched, fully interactive) -->
            <template v-if="prevSessions.length">
                <!-- Load more button -->
                <button v-if="prevHasMore" class="prev-load-more" @click="fetchPreviousSession(true)" :disabled="prevLoading">
                    {{ prevLoading ? 'Loading...' : 'Load older session' }}
                </button>

                <template v-for="(session, si) in prevSessions" :key="'ps-'+si">
                    <div class="prev-session-header">
                        Session {{ prevSessions.length - si }}{{ session.timeLabel ? ' \u2014 ' + session.timeLabel : '' }}
                    </div>
                    <div class="prev-session-wrapper">
                        <template v-for="(msg, mi) in session.messages" :key="'prev-'+si+'-'+mi">
                            <UserMessage v-if="msg.role === 'user'" :msg="msg" />
                            <AssistantMessage
                                v-else-if="msg.role === 'assistant'"
                                :msg="msg"
                                :agentDisplayName="getFormattedAgentName(msg.agentId || selectedAgent)"
                                :isAgentRunning="false"
                                :allAgents="allAgents"
                                :getToolsForTurn="() => []"
                                :hudVersion="0"
                            />
                        </template>
                    </div>
                </template>

                <div class="session-divider">
                    <span class="session-divider-text">Current session</span>
                </div>
            </template>
            <template v-for="(msg, i) in groupedVisibleMsgs" :key="i">
                <!-- Branch 0: NO_SESSION marker -->
                <div v-if="msg.type === 'no_session'" class="no-session-center">— NO SESSION —</div>

                <!-- Branch 1: System, Groups, and Headlines (skip footer headlines — rendered below) -->
                <SystemMessage
                    v-if="msg.type !== 'no_session' && (msg.role === 'system' || msg.role === 'system_group' || msg.type === 'headline') && msg.position !== 'footer'"
                    :msg="msg"
                />
                <!-- Load more button: after the first header headline -->
                <button v-if="hasMore && msg.type === 'headline' && msg.position !== 'footer' && i === 0" class="load-more-btn" @click="loadMore">↑ Load previous messages</button>

                <!-- Branch 1b: Session Context (injected prompt) -->
                <div v-else-if="msg.role === 'session_context'" class="session-context-badge">
                    <span class="session-context-text">{{ msg.content }}</span>
                </div>

                <!-- Branch 2: User Messages -->
                <UserMessage
                    v-else-if="msg.role === 'user'"
                    :msg="msg"
                />

                <!-- Branch 3: Thinking Messages -->
                <div v-else-if="msg.role === 'thinking'" class="message thinking">
                    <details :open="!msg.collapsed">
                        <summary><ChatBubbleBottomCenterTextIcon class="w-4 h-4 inline" /> thinking…</summary>
                        <pre class="thinking-content">{{ typeof msg.content === 'object' ? msg.content.value : msg.content }}</pre>
                    </details>
                </div>

                <!-- Branch 4: Assistant Messages -->
                <AssistantMessage
                    v-else-if="msg.role === 'assistant'"
                    :msg="msg"
                    :agentDisplayName="getFormattedAgentName(msg.agentId)"
                    :isAgentRunning="isAgentRunning"
                    :allAgents="allAgents"
                    :getToolsForTurn="getToolsForTurn"
                    :hudVersion="hudVersion"
                />

                <!-- SM status bar: after last real message, before any footer headline -->
                <div v-if="i === lastRealMsgIdx" class="sm-status-bar">
                    <div class="sm-dot" :class="smState"></div>
                    <span class="sm-status-label">{{ smLabel }}</span>
                </div>
            </template>

            <!-- SM badge fallback: shown when there are no real messages -->
            <div v-if="lastRealMsgIdx === -1" class="sm-status-bar">
                <div class="sm-dot" :class="smState"></div>
                <span class="sm-status-label">{{ smLabel }}</span>
            </div>

            <!-- Footer headline -->
            <SystemMessage v-if="footerHeadline" :msg="footerHeadline" />

            <!-- Controls: immediately after last message -->
            <div class="msg-controls" ref="controlsEl">
                <HudControls
                    :smState="smState"
                    :connected="connected"
                    :isAgentRunning="chatStore.isRunning"
                    :handoverPending="chatStore.handoverPending"
                    :isPublic="selectedMode === 'public'"
                    @new="onNew"
                    @handover="chatStore.handover()"
                    @confirm-new="onConfirmNew"
                    @stay="chatStore.stay()"
                />
            </div>

            <!-- Spacer: separate element so measurements don't oscillate -->
            <div class="scroll-spacer" :style="{ height: spacerHeight + 'px', flexShrink: 0 }"></div>
        </OverlayScrollbarsComponent>
      </div>

        <div class="input-area"
            @dragover.prevent="onDragOver"
            @dragleave.prevent="onDragLeave"
            @drop.prevent="onDrop">
            <!-- Mic denied hint -->
            <div v-if="micDenied" class="mic-denied-hint">Mic access denied — enable in browser settings</div>
            <!-- Recording indicator -->
            <div v-if="isRecording" class="recording-strip">
                <span class="rec-dot"></span>
                <div class="rec-level-bar"><div class="rec-level-fill" :style="{ width: (audioLevel * 100) + '%' }"></div></div>
                <span class="rec-time">{{ formatDuration(duration) }}</span>
                <button class="rec-cancel" @click.stop="cancelRecording" title="Cancel">&times;</button>
            </div>
            <!-- Attachment thumbnails -->
            <div v-if="attachments.length" class="attachment-strip">
                <div v-for="(att, i) in attachments" :key="i" class="attachment-thumb" :class="{ 'audio-thumb': att.mimeType.startsWith('audio/') }">
                    <template v-if="att.mimeType.startsWith('audio/')">
                        <span class="audio-icon">&#9835;</span>
                        <span class="audio-name">{{ att.fileName }}</span>
                    </template>
                    <img v-else :src="att.preview" :alt="att.fileName" />
                    <button class="remove-att" @click.stop="removeAttachment(i)">&times;</button>
                </div>
            </div>
            <div class="input-box" :class="{ 'drag-over': isDragOver }" @click="inputEl?.focus()">
                <button class="attach-btn" @click.stop="fileInputEl?.click()" title="Attach file">
                    <PaperClipIcon class="w-4 h-4" />
                </button>
                <button class="mic-btn" :class="{ recording: isRecording }" @click.stop="toggleRecording" :title="isRecording ? 'Stop recording' : 'Record audio'">
                    <MicrophoneIcon class="w-4 h-4" />
                </button>
                    <input type="file" ref="fileInputEl" class="hidden" accept="image/jpeg,image/png,image/gif,image/webp,application/pdf,audio/webm,audio/mp4,audio/ogg,audio/mpeg,audio/wav" multiple @change="onFileSelect" />
                <textarea
                    ref="inputEl"
                    v-model="input"
                    @keydown="(e: KeyboardEvent) => {
                        if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); send(); }
                    }"
                    @input="autoGrow(); onInputChange()"
                    @paste="onPaste"
                    placeholder="Message..."
                    rows="1"
                    class="chat-input"
                    :class="{ shake: isShaking }"
                ></textarea>
                <!-- Stop button during agent run (subtle, right side) -->
                <button v-if="smState === 'AGENT_RUNNING' || smState === 'STOP_PENDING'"
                    class="stop-btn"
                    :disabled="smState === 'STOP_PENDING'"
                    @click="chatStore.stop()"
                    :title="smState === 'STOP_PENDING' ? 'Stopping...' : 'Stop'">
                    <StopIcon class="w-3.5 h-3.5" />
                </button>
                <!-- Send button -->
                <button class="send-btn" @click="send"
                    :disabled="!connected || sending || (!input.trim() && !hasAttachments())">
                    <ArrowUpIcon v-if="!sending" class="w-4 h-4" />
                    <span v-else style="font-size:11px">…</span>
                </button>
            </div>
        </div>
    </div>
  </div>
</template>

<script setup lang="ts">
defineOptions({ name: 'ChatPane' });
import { ref, watch, nextTick, onMounted, onUnmounted, computed, toRef } from 'vue';
import { useChatStore } from '../store/chat';
import { useMessages } from '../composables/useMessages';
import { useMessageGrouping } from '../composables/useMessageGrouping';
import { useInputAutogrow } from '../composables/useInputAutogrow';
import { useAgentDisplay } from '../composables/useAgentDisplay';
import { useAgentSocket } from '../composables/useAgentSocket';
import { OverlayScrollbarsComponent } from 'overlayscrollbars-vue';
import { scrollbarOptions } from '../composables/useScrollbar';
import { ArrowUpIcon, StopIcon, ChatBubbleBottomCenterTextIcon, PaperClipIcon, MicrophoneIcon } from '@heroicons/vue/20/solid';
import { useAttachments } from '../composables/useAttachments';
import { useAudioRecorder } from '../composables/useAudioRecorder';
import UserMessage from './UserMessage.vue';
import AssistantMessage from './AssistantMessage.vue';
import SystemMessage from './SystemMessage.vue';
import HudControls from './HudControls.vue';
import { relativeTime } from '../utils/relativeTime';
import { getApiBase } from '../utils/apiBase';

const props = defineProps<{
    connected: boolean;
    selectedAgent: string;
    selectedMode: 'private' | 'public';
    allAgents: any[];
    defaultAgent: string;
    wsSend: (...args: any[]) => void;
    viewActive: boolean;
}>();

const emit = defineEmits<{
    (e: 'hud-update', payload: { hudTree: any[]; hudVersion: number; connected: boolean }): void;
}>();

const chatStore = useChatStore();
const smState = toRef(chatStore, 'smState');
const channelState = toRef(chatStore, 'channelState');
const connectionState = toRef(chatStore, 'connectionState');
const smLabel = toRef(chatStore, 'smLabel');

// UI hidden when not synced
const isHidden = computed(() => connectionState.value !== 'SYNCED');

// Previous sessions (server-fetched, supports load-more)
interface PrevSession { messages: any[]; timestamp: string | null; timeLabel: string }
const prevSessions = ref<PrevSession[]>([]);
const prevHasMore = ref(false);
const prevLoading = ref(false);
const prevSkip = ref(0);
const prevMessages = computed(() => prevSessions.value.flatMap(s => s.messages));

async function fetchPreviousSession(loadMore = false) {
    if (!props.selectedAgent || prevLoading.value) return;
    prevLoading.value = true;
    try {
        const token = localStorage.getItem('nyx_session') || localStorage.getItem('titan_token') || '';
        const skip = loadMore ? prevSkip.value : 0;
        const apiBase = getApiBase();
        const res = await fetch(`${apiBase}/api/session-history?agent=${props.selectedAgent}&mode=${props.selectedMode}&skip=${skip}&count=1`, {
            headers: { 'Authorization': `Bearer ${token}` },
        });
        if (!res.ok) return;
        const data = await res.json();
        const newSessions: PrevSession[] = (data.sessions || []).map((s: any) => ({
            messages: (s.entries || []).map((e: any) => ({
                role: e.role,
                content: e.content,
                timestamp: e.timestamp,
                agentId: props.selectedAgent,
                streaming: false,
            })),
            timestamp: s.resetTimestamp,
            timeLabel: s.resetTimestamp ? relativeTime(s.resetTimestamp) : '',
        }));
        if (loadMore) {
            prevSessions.value = [...newSessions, ...prevSessions.value];
        } else {
            prevSessions.value = newSessions;
        }
        prevSkip.value = skip + newSessions.length;
        prevHasMore.value = data.hasMore ?? false;
    } catch { /* silently fail */ }
    finally { prevLoading.value = false; }
}

// Messages
const { sending, input, messagesEl, scrollToBottom, scrollIfAtBottom, send: _send, onInputChange, navigateHistory, restoreLastSent } = useMessages(props.wsSend);

const controlsEl = ref<HTMLElement | null>(null);

const footerHeadline = computed(() => {
    const msgs = groupedVisibleMsgs.value;
    const last = msgs[msgs.length - 1];
    return last?.position === 'footer' ? last : null;
});

const lastRealMsgIdx = computed(() => {
    const msgs = groupedVisibleMsgs.value;
    for (let i = msgs.length - 1; i >= 0; i--) {
        if (msgs[i].type !== 'headline') return i;
    }
    return -1;
});

const VISIBLE_PAGE = 50;
const visibleCount = ref(VISIBLE_PAGE);

const { groupedVisibleMsgs, hasMore, loadMore, getFormattedAgentName } = useMessageGrouping(
    computed(() => chatStore.messages),
    visibleCount,
    computed(() => props.selectedAgent),
    computed(() => props.allAgents),
    toRef(chatStore, 'sessionKey'),
);

const sentMessages = new Set<string>();
const lastUsage = ref<null | any>(null);
const pendingClearRef = ref(false);

const { mount, lastSystemMsg, hudTree, hudVersion, getToolsForTurn, hudSnapshot, toolCallMapSnapshot, hasActiveStreamingMessage, sessionHistoryComplete } = useAgentSocket(visibleCount, lastUsage, pendingClearRef, sentMessages, restoreLastSent);

// Expose HUD data to parent for debug panels
watch([hudTree, hudVersion, () => props.connected], () => {
    emit('hud-update', { hudTree: hudTree.value, hudVersion: hudVersion.value, connected: props.connected });
}, { immediate: true });

// Expose to devtools / console
if (typeof window !== 'undefined') {
    (window as any).__hudSnapshot = hudSnapshot;
    (window as any).__toolCallMap = toolCallMapSnapshot;
}

// --- Scroll logic ---
let userSendInFlight = false;
const spacerHeight = ref(0);

function getViewport(): HTMLElement | null {
    const el = messagesEl.value;
    if (!el) return null;
    const root = el.$el || el;
    return root.querySelector('[data-overlayscrollbars-viewport]') as HTMLElement | null;
}

function recalcSpacerSync(): number {
    const viewport = getViewport();
    if (!viewport) return 0;
    const controls = (controlsEl.value || viewport.querySelector('.msg-controls')) as HTMLElement | null;
    if (!controls) return 0;
    const userMsgs = viewport.querySelectorAll('.message.user');
    const last = userMsgs[userMsgs.length - 1] as HTMLElement;
    if (!last) return 0;
    const vpRect = viewport.getBoundingClientRect();
    const st = viewport.scrollTop;
    const msgTop = last.getBoundingClientRect().top - vpRect.top + st;
    const ctrlBottom = controls.getBoundingClientRect().bottom - vpRect.top + st;
    const vpH = viewport.clientHeight;
    const needed = msgTop - 40 + vpH;
    const h = Math.max(0, needed - ctrlBottom);
    spacerHeight.value = h;
    return h;
}

let _spacerInterval: ReturnType<typeof setInterval> | null = null;

function scrollToUserMsg(smooth = true) {
    nextTick(() => nextTick(() => {
        recalcSpacerSync();
        nextTick(() => {
            const viewport = getViewport();
            if (!viewport) return;
            void viewport.offsetHeight;
            const userMsgs = viewport.querySelectorAll('.message.user');
            const last = userMsgs[userMsgs.length - 1] as HTMLElement;
            if (!last) return;
            const vpRect = viewport.getBoundingClientRect();
            const msgRect = last.getBoundingClientRect();
            const offset = viewport.scrollTop + (msgRect.top - vpRect.top) - 40;
            viewport.scrollTo({ top: Math.max(0, offset), behavior: smooth ? 'smooth' : 'instant' });
        });
    }));
}

// Connection SM: when SYNCED, scroll to bottom and fetch previous session
watch(connectionState, (val) => {
    if (!props.viewActive) return;
    if (val === 'SYNCED') {
        if (!prevMessages.value.length) fetchPreviousSession();
        scrollToBottom();
    }
});

// Channel SM: handle agent done
watch(channelState, (val, prev) => {
    if (!props.viewActive) return;
    if (prev === 'AGENT_RUNNING' && (val === 'READY' || val === 'FRESH')) {
        userSendInFlight = false;
    }
    if (val === 'AGENT_RUNNING' && prev !== 'AGENT_RUNNING') {
        if (!userSendInFlight) {
            scrollToBottom();
        }
    }
});

function send() {
    const content = input.value.trim();
    const hasAtt = hasAttachments();
    if (!content && !hasAtt) { triggerShake(); return; }
    chatStore.truncatedWarning = false;
    const ch = channelState.value;
    const conn = connectionState.value;
    if (conn !== 'SYNCED') {
        chatStore.pushSystem('Not connected yet -- please wait.', props.selectedAgent);
        triggerShake();
    } else if (ch === 'READY' || ch === 'FRESH') {
        if (content) sentMessages.add(content);
        userSendInFlight = true;
        const payload = hasAtt ? toPayload() : undefined;
        _send(payload);
        clearAttachments();
        scrollToUserMsg();
    } else if (ch === 'AGENT_RUNNING') {
        chatStore.queuedThought = content;
        input.value = '';
        clearAttachments();
        chatStore.pushSystem('Queued -- will send when agent finishes.', props.selectedAgent);
    } else if (ch === 'NO_SESSION') {
        triggerShake();
    } else {
        triggerShake();
    }
}

function onNew() {
    chatStore.newSession();
    scrollToBottom();
}
function onConfirmNew() {
    chatStore.confirmNew();
    scrollToBottom();
}

const { inputEl, isShaking, autoGrow, triggerShake } = useInputAutogrow(input);
const { isAgentRunning } = useAgentDisplay(computed(() => props.selectedAgent), computed(() => props.defaultAgent), computed(() => props.allAgents));

// Attachments
const { attachments, addFiles, removeAttachment, clearAttachments, toPayload, hasAttachments } = useAttachments();
const fileInputEl = ref<HTMLInputElement | null>(null);
const isDragOver = ref(false);

// Audio recorder
const { isRecording, duration, audioLevel, micDenied, startRecording, stopRecording, cancelRecording, formatDuration } = useAudioRecorder();

async function toggleRecording() {
    if (isRecording.value) {
        const file = await stopRecording();
        if (file) addFiles([file]);
    } else {
        await startRecording();
    }
}

function onFileSelect(e: Event) {
    const input = e.target as HTMLInputElement;
    if (input.files?.length) addFiles(input.files);
    input.value = '';
}

function onPaste(e: ClipboardEvent) {
    const items = e.clipboardData?.files;
    if (items?.length) {
        const media = Array.from(items).filter(f => f.type.startsWith('image/') || f.type.startsWith('audio/'));
        if (media.length) {
            e.preventDefault();
            addFiles(media);
        }
    }
}

function onDragOver(e: DragEvent) {
    if (e.dataTransfer?.types.includes('Files')) isDragOver.value = true;
}
function onDragLeave() { isDragOver.value = false; }
function onDrop(e: DragEvent) {
    isDragOver.value = false;
    if (e.dataTransfer?.files.length) addFiles(e.dataTransfer.files);
}

// Agent switch reset — called by parent
function resetForAgentSwitch() {
    lastUsage.value = null;
    sentMessages.clear();
    prevSessions.value = [];
    prevHasMore.value = false;
    prevSkip.value = 0;
    chatStore.resetLocalSession();
}

defineExpose({ resetForAgentSwitch });

onMounted(() => {
    chatStore.setWsSend(props.wsSend);
    const unsubscribe = mount();
    if (connectionState.value === 'SYNCED') fetchPreviousSession();
    const viewport = getViewport();
    let ro: ResizeObserver | null = null;
    if (viewport) {
        ro = new ResizeObserver(() => recalcSpacerSync());
        ro.observe(viewport);
    }
    recalcSpacerSync();
    _spacerInterval = setInterval(recalcSpacerSync, 200);
    onUnmounted(() => {
        unsubscribe();
        ro?.disconnect();
        if (_spacerInterval) clearInterval(_spacerInterval);
    });
});
</script>

<style scoped>
/* Hide messages during agent switch to prevent scroll flicker */
.messages.is-switching { opacity: 0; }

.input-toolbar { display: flex; align-items: center; justify-content: flex-end; }
.truncated-banner {
  margin: 0 12px 8px;
  padding: 8px 12px;
  background: rgba(234, 179, 8, 0.12);
  border: 1px solid rgba(234, 179, 8, 0.35);
  border-radius: 8px;
  color: #fbbf24;
  line-height: 1.4;
}
.send-btn {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  flex-shrink: 0;
  align-self: flex-end;
  margin-bottom: 1px;
  border-radius: 50%;
  border: none;
  background: var(--send-btn-bg, var(--accent));
  color: var(--send-btn-color, white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, opacity 0.15s;
  padding: 0;
}
.send-btn svg { display: block; }
.send-btn:hover:not(:disabled) { filter: brightness(1.1); }
.send-btn:disabled { opacity: 0.25; cursor: not-allowed; background: var(--muted); }

/* Controls: right after last message, always nearby */
.msg-controls {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  padding: 8px 0;
}

/* Stop button — subtle, next to send */
.stop-btn {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  align-self: flex-end;
  margin-bottom: 3px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s;
  padding: 0;
  opacity: 0.6;
}
.stop-btn:hover:not(:disabled) { opacity: 1; color: var(--text); background: var(--hover-bg, rgba(255,255,255,0.05)); }
.stop-btn:disabled { opacity: 0.2; cursor: not-allowed; }
.sm-status-bar { display: flex; align-items: center; gap: 0.4rem; padding: 0.1rem 0 0.1rem 0.75rem; }
.sm-dot { width: 6px; height: 6px; border-radius: 50%; background: #64748b; flex-shrink: 0; }
.sm-dot.AGENT_RUNNING, .sm-dot.STOP_PENDING { background: #3b82f6; box-shadow: 0 0 6px #3b82f6; animation: pulse 2s infinite; }
.sm-dot.HANDOVER_PENDING { background: #f59e0b; }
.sm-dot.IDLE { background: #22c55e; }
.sm-dot.ERROR { background: #ef4444; }
.sm-dot.NO_SESSION { background: #f59e0b; animation: pulse 2s infinite; }

/* --- Previous sessions (server-fetched) --- */
.prev-load-more {
    display: block;
    margin: 4px auto 8px;
    padding: 4px 16px;
    font-size: 0.72rem;
    color: var(--text-dim);
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.15s, border-color 0.15s;
}
.prev-load-more:hover:not(:disabled) { opacity: 1; border-color: var(--accent); }
.prev-load-more:disabled { cursor: default; }
.prev-session-header {
    text-align: center;
    font-size: 0.72rem;
    color: var(--text-dim);
    opacity: 0.5;
    padding: 8px 0 4px;
    user-select: none;
}
.prev-session-wrapper {
    opacity: 0.6;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.session-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
}
.session-divider::before,
.session-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}
.session-divider-text {
    font-size: 0.7rem;
    color: var(--text-dim);
    opacity: 0.5;
    white-space: nowrap;
    user-select: none;
}

.no-session-center {
  text-align: center;
  font-weight: 700;
  color: var(--text-dim);
  opacity: 0.45;
  padding: 1.5rem 0;
}
.session-context-badge {
  display: flex;
  align-self: center;
  max-width: 85%;
  padding: 0.35rem 0.75rem;
  margin: -0.25rem 0;
  background: rgba(219, 39, 119, 0.08);
  border: 1px solid rgba(219, 39, 119, 0.25);
  border-radius: 8px;
}
.session-context-text {
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(219, 39, 119, 0.7);
  line-height: 1.3;
}
.sm-status-label { font-weight: 600; color: var(--text-dim); }
@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.4; } 100% { opacity: 1; } }

.load-more-btn {
  align-self: center;
  margin-bottom: 0.25rem;
  background: var(--bg-dim);
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 0.4rem 1rem;
  border-radius: 20px;
  cursor: pointer;
}

/* Mobile: larger touch targets */
@media (max-width: 480px) {
  .send-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }
}

/* --- Attachment UI --- */
.attach-btn {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  flex-shrink: 0;
  align-self: flex-end;
  margin-bottom: 1px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s;
  padding: 0;
}
.attach-btn:hover { color: var(--text); }

.attachment-strip {
  display: flex;
  gap: 6px;
  padding: 6px 4px 2px;
  overflow-x: auto;
  flex-shrink: 0;
}
.attachment-thumb {
  position: relative;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.attachment-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.remove-att {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.remove-att:hover { background: rgba(239,68,68,0.8); }

.input-box.drag-over {
  outline: 2px dashed var(--accent);
  outline-offset: -2px;
  background: rgba(59,130,246,0.05);
}

.hidden { display: none; }

/* --- Mic button --- */
.mic-btn {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  flex-shrink: 0;
  align-self: flex-end;
  margin-bottom: 1px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s;
  padding: 0;
}
.mic-btn:hover { color: var(--text); }
.mic-btn.recording {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.12);
  animation: pulse-mic 1.2s infinite;
}
@keyframes pulse-mic {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* --- Mic denied hint --- */
.mic-denied-hint {
  padding: 6px 12px;
  font-size: 0.78rem;
  color: #e06c75;
  background: rgba(224, 108, 117, 0.1);
  border-radius: 8px 8px 0 0;
  text-align: center;
  animation: fadeInOut 5s ease-in-out forwards;
}
@keyframes fadeInOut { 0% { opacity: 0; } 10% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }

/* --- Recording indicator --- */
.recording-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 2px;
  flex-shrink: 0;
}
.rec-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  flex-shrink: 0;
  animation: pulse-mic 1s infinite;
}
.rec-level-bar {
  flex: 1;
  height: 4px;
  background: rgba(239, 68, 68, 0.15);
  border-radius: 2px;
  overflow: hidden;
  max-width: 120px;
}
.rec-level-fill {
  height: 100%;
  background: #ef4444;
  border-radius: 2px;
  transition: width 0.08s linear;
}
.rec-time {
  font-size: 0.8rem;
  font-weight: 600;
  color: #ef4444;
  font-variant-numeric: tabular-nums;
}
.rec-cancel {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.rec-cancel:hover { background: rgba(239, 68, 68, 0.3); }

/* --- Audio attachment thumb --- */
.attachment-thumb.audio-thumb {
  width: auto;
  min-width: 56px;
  max-width: 160px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  background: var(--surface);
}
.audio-icon {
  font-size: 1.1rem;
  opacity: 0.6;
}
.audio-name {
  font-size: 0.65rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-dim);
}
</style>
