<script setup>
/*
 * MelissaConversas — CRM de WhatsApp dentro de Melissa.
 * Segue o blueprint melissa-page-blueprint.md.
 *
 * Layout 2-col:
 *   - COL 1 — Aside (~280px): filtros rápidos (todas/não lidas) +
 *            atribuição (minhas/não atribuídas) + canais + kanban resumo
 *            + alerta de não vinculados
 *   - COL 2 — Main: kanban grid 4-col (Urgente / Aguardando resposta /
 *            Aguardando paciente / Resolvido) com cards
 *
 * Click num card abre o ConversationDrawer (componente existente,
 * já mountado no MelissaLayout). Sem rotas externas — fica tudo
 * dentro do Melissa.
 */
import { ref, computed, onMounted, onBeforeUnmount, watch } from 'vue';
import { supabase } from '@/lib/supabase/client';
import Popover from 'primevue/popover';
import { useConversations } from '@/composables/useConversations';
import { useConversationTags } from '@/composables/useConversationTags';
import { useTenantStore } from '@/stores/tenantStore';
import { useConversationDrawerStore } from '@/stores/conversationDrawerStore';
// Badge/InputText/IconField/InputIcon: auto-import via PrimeVueResolver

const emit = defineEmits(['close']);

const tenantStore = useTenantStore();
const drawerStore = useConversationDrawerStore();

// ── Breakpoints + drawer (blueprint §2/§3) ─────────────────
const drawerOpen = ref(false);
const isMobile = ref(false);
const isCompact = ref(false);
let _mqMobile = null;
let _mqCompact = null;
function _onMqMobileChange(e) {
    isMobile.value = e.matches;
    if (!e.matches) drawerOpen.value = false;
}
function _onMqCompactChange(e) {
    isCompact.value = e.matches;
}
function toggleDrawer() { drawerOpen.value = !drawerOpen.value; }
function fecharDrawer() { drawerOpen.value = false; }

// ── Composables (espelhado da CRMConversasPage) ─────────────
const { threads, filteredThreads, byKanban, summary, filters, loading, load, subscribeRealtime, unsubscribeRealtime } = useConversations();

const tagsApi = useConversationTags();
const threadTagsMap = ref(new Map());
const tagById = computed(() => {
    const m = {};
    for (const t of tagsApi.allTags.value) m[t.id] = t;
    return m;
});
function tagsForThread(threadKey) {
    const ids = threadTagsMap.value.get(threadKey) || [];
    return ids.map((id) => tagById.value[id]).filter(Boolean);
}
async function reloadThreadTags() {
    const keys = filteredThreads.value.map((t) => t.thread_key);
    threadTagsMap.value = await tagsApi.loadForThreads(keys);
}

// Atribuição
const currentUserId = ref(null);
supabase.auth.getUser().then(({ data }) => { currentUserId.value = data?.user?.id ?? null; });
const mineCount = computed(() => {
    const uid = currentUserId.value;
    if (!uid) return 0;
    return threads.value.filter((t) => t.assigned_to === uid).length;
});
const unassignedCount = computed(() => threads.value.filter((t) => !t.assigned_to).length);

const memberNameMap = ref({});
async function loadMemberNames() {
    const tenantId = tenantStore.activeTenantId;
    if (!tenantId) return;
    const { data } = await supabase
        .from('v_tenant_members_with_profiles')
        .select('user_id, full_name, email')
        .eq('tenant_id', tenantId)
        .eq('status', 'active');
    const map = {};
    for (const m of (data || [])) {
        map[m.user_id] = m.full_name || m.email || '';
    }
    memberNameMap.value = map;
}
function assigneeLabel(userId) {
    if (!userId) return '';
    const full = memberNameMap.value[userId];
    if (!full) return 'Atribuída';
    const parts = full.trim().split(/\s+/);
    if (parts.length === 1) return parts[0].slice(0, 14);
    return `${parts[0]} ${parts[parts.length - 1][0]}.`;
}

// Constantes
const KANBAN_COLUMNS = [
    { key: 'urgent', label: 'Urgente', icon: 'pi pi-exclamation-triangle', color: 'red' },
    { key: 'awaiting_us', label: 'Aguardando resposta', icon: 'pi pi-inbox', color: 'amber' },
    { key: 'awaiting_patient', label: 'Aguardando paciente', icon: 'pi pi-hourglass', color: 'blue' },
    { key: 'resolved', label: 'Resolvido', icon: 'pi pi-check', color: 'emerald' }
];

const CHANNEL_OPTIONS = [
    { label: 'Todos', value: null },
    { label: 'WhatsApp', value: 'whatsapp' },
    { label: 'SMS', value: 'sms' },
    { label: 'E-mail', value: 'email' }
];

// Helpers
function fmtRelative(iso) {
    if (!iso) return '';
    const d = new Date(iso);
    const now = new Date();
    const diff = Math.floor((now - d) / 1000);
    if (diff < 60) return 'agora';
    if (diff < 3600) return `${Math.floor(diff / 60)}m`;
    if (diff < 86400) return `${Math.floor(diff / 3600)}h`;
    if (diff < 604800) return `${Math.floor(diff / 86400)}d`;
    return d.toLocaleDateString('pt-BR');
}
function channelIcon(ch) {
    const map = { whatsapp: 'pi-whatsapp', sms: 'pi-comment', email: 'pi-envelope' };
    return map[ch] || 'pi-comment';
}
function truncate(s, n = 80) {
    if (!s) return '';
    const str = String(s).replace(/\s+/g, ' ').trim();
    return str.length > n ? str.slice(0, n - 1) + '…' : str;
}
function contactLabel(thread) {
    return thread.patient_name || thread.contact_number || 'Desconhecido';
}

function onCardClick(thread) {
    drawerStore.openForThread(thread);
    if (isMobile.value) fecharDrawer();
}

const carregandoInicial = computed(
    () => loading.value && filteredThreads.value.length === 0
);

const unlinkedCount = computed(() => filteredThreads.value.filter((t) => !t.patient_id).length);

// ── "Limpar filtros" global (footer fixo da sidebar) ─────────────
// `filters` é um ref({...}) (vide useConversations.js). No script
// preciso acessar via .value; no template o auto-unwrap cuida.
const hasActiveFilters = computed(() =>
    !!(filters.value.search || filters.value.unreadOnly || filters.value.assigned || filters.value.channel)
);
function clearAllFilters() {
    filters.value.search = '';
    filters.value.unreadOnly = false;
    filters.value.assigned = null;
    filters.value.channel = null;
}

// Popover de Ações (compact)
const actionsPopRef = ref(null);
function openActions(e) { actionsPopRef.value?.toggle(e); }

// Lifecycle
onMounted(async () => {
    if (typeof window !== 'undefined' && window.matchMedia) {
        _mqMobile = window.matchMedia('(max-width: 1023px)');
        isMobile.value = _mqMobile.matches;
        _mqMobile.addEventListener('change', _onMqMobileChange);
        _mqCompact = window.matchMedia('(max-width: 1279px)');
        isCompact.value = _mqCompact.matches;
        _mqCompact.addEventListener('change', _onMqCompactChange);
    }
    await load();
    subscribeRealtime();
    await Promise.all([tagsApi.loadAllTags(), reloadThreadTags(), loadMemberNames()]);
});
onBeforeUnmount(() => {
    if (_mqMobile) _mqMobile.removeEventListener('change', _onMqMobileChange);
    if (_mqCompact) _mqCompact.removeEventListener('change', _onMqCompactChange);
    unsubscribeRealtime();
});

// Recarrega tags quando drawer fecha
watch(() => drawerStore.isOpen, (isOpen) => {
    if (!isOpen) { reloadThreadTags(); load(); }
});
watch(() => filteredThreads.value.length, () => { reloadThreadTags(); });
watch(() => tenantStore.activeTenantId, async () => {
    unsubscribeRealtime();
    await load();
    subscribeRealtime();
});
</script>

<template>
    <!-- Drawer host (blueprint §2) -->
    <aside
        class="mw-mobile-drawer"
        :class="{ 'is-open': drawerOpen }"
        v-show="isMobile"
        aria-label="Filtros & atribuição"
    >
        <div id="mw-mobile-drawer-target" class="mw-mobile-drawer__scroll" />
    </aside>
    <Transition name="mw-drawer-fade">
        <div
            v-if="isMobile && drawerOpen"
            class="mw-mobile-drawer__backdrop"
            @click="fecharDrawer"
        />
    </Transition>

    <section class="mw-page">
        <header class="mw-page__head">
            <button
                class="mw-menu-btn mw-menu-btn--mobile-only"
                v-tooltip.bottom="'Filtros & atribuição'"
                @click="toggleDrawer"
            >
                <i class="pi pi-bars" />
                <span>Menu Conversas</span>
            </button>
            <div class="mw-page__title">
                <i class="pi pi-comments text-emerald-300" />
                <span>Conversas</span>
                <span class="mw-page__count">{{ summary.total }}</span>
                <span v-if="summary.unreadTotal > 0" class="mw-page__unread">
                    {{ summary.unreadTotal }} não lida{{ summary.unreadTotal !== 1 ? 's' : '' }}
                </span>
            </div>
            <div class="mw-page__actions">
                <div class="mw-search mw-search--xl-only">
                    <i class="pi pi-search mw-search__icon" />
                    <input
                        v-model="filters.search"
                        type="text"
                        placeholder="Buscar paciente, número ou mensagem"
                        maxlength="120"
                        class="mw-search__input"
                    />
                </div>
                <button
                    class="mw-head-btn mw-head-btn--compact-only"
                    v-tooltip.bottom="'Buscar'"
                    @click="openActions"
                >
                    <i class="pi pi-search" />
                </button>
                <button
                    class="mw-head-btn"
                    v-tooltip.bottom="'Recarregar'"
                    :disabled="loading"
                    @click="load"
                >
                    <i :class="loading ? 'pi pi-spin pi-spinner' : 'pi pi-refresh'" />
                </button>
                <button class="mw-close" v-tooltip.bottom="'Voltar ao resumo (Esc)'" @click="emit('close')">
                    <i class="pi pi-times" />
                </button>
            </div>
        </header>

        <Popover ref="actionsPopRef" class="mw-actions-pop">
            <div class="mw-actions">
                <div class="mw-actions__group">
                    <div class="mw-actions__label">Buscar</div>
                    <InputText
                        v-model="filters.search"
                        placeholder="Paciente, número ou mensagem…"
                        maxlength="120"
                        class="w-full"
                    />
                </div>
            </div>
        </Popover>

        <!-- Subheader explicativo (blueprint §9) — diferencia de
             outras páginas Melissa que mostram listas tabulares. -->
        <div class="mw-subheader">
            <i class="pi pi-info-circle mw-subheader__icon" />
            <span class="mw-subheader__text">
                CRM de mensagens organizado em <strong>kanban por urgência</strong>:
                Urgente / Aguardando resposta / Aguardando paciente / Resolvido.
                Click num card abre a conversa no painel lateral.
            </span>
        </div>

        <div class="mw-body">
            <!-- ═══ COL 1: Filtros + atribuição + canais + status ═══ -->
            <Teleport to="#mw-mobile-drawer-target" :disabled="!isMobile">
            <aside class="mw-side">
                <div class="mw-side__scroll">
                    <!-- Alerta unlinked — no topo pra ficar bem visível
                         (números de telefone sem paciente vinculado). -->
                    <div v-if="unlinkedCount > 0" class="mw-alert">
                        <i class="pi pi-exclamation-circle" />
                        <div>
                            <div class="mw-alert__title">{{ unlinkedCount }} sem paciente vinculado</div>
                            <div class="mw-alert__hint">Números de telefone que não batem com pacientes cadastrados.</div>
                        </div>
                    </div>

                    <!-- Filtros rápidos -->
                    <div class="mw-w mw-w--side">
                        <div class="mw-w__head">
                            <span class="mw-w__title"><i class="pi pi-filter" /> Filtros rápidos</span>
                            <button
                                v-if="filters.unreadOnly"
                                class="mw-side__clear-inline"
                                v-tooltip.top="'Limpar filtro de não lidas'"
                                aria-label="Limpar filtro de não lidas"
                                @click="filters.unreadOnly = false"
                            >
                                <i class="pi pi-times" />
                            </button>
                        </div>
                        <div class="mw-side__list">
                            <button
                                class="mw-side__item"
                                :class="{ 'is-active': !filters.unreadOnly }"
                                @click="filters.unreadOnly = false"
                            >
                                <i class="pi pi-list" />
                                <span>Todas</span>
                                <span class="mw-side__count">{{ summary.total }}</span>
                            </button>
                            <button
                                class="mw-side__item"
                                :class="{ 'is-active': filters.unreadOnly, 'is-warn': summary.unreadTotal > 0 }"
                                @click="filters.unreadOnly = !filters.unreadOnly"
                            >
                                <i class="pi pi-bell" />
                                <span>Não lidas</span>
                                <span class="mw-side__count" :class="{ 'is-danger': summary.unreadTotal > 0 }">{{ summary.unreadTotal }}</span>
                            </button>
                        </div>
                    </div>

                    <!-- Atribuição -->
                    <div class="mw-w mw-w--side">
                        <div class="mw-w__head">
                            <span class="mw-w__title"><i class="pi pi-user" /> Atribuição</span>
                            <button
                                v-if="filters.assigned"
                                class="mw-side__clear-inline"
                                v-tooltip.top="'Limpar filtro de atribuição'"
                                aria-label="Limpar filtro de atribuição"
                                @click="filters.assigned = null"
                            >
                                <i class="pi pi-times" />
                            </button>
                        </div>
                        <div class="mw-side__list">
                            <button
                                class="mw-side__item"
                                :class="{ 'is-active': !filters.assigned }"
                                @click="filters.assigned = null"
                            >
                                <i class="pi pi-list" />
                                <span>Todas</span>
                            </button>
                            <button
                                class="mw-side__item"
                                :class="{ 'is-active': filters.assigned === 'me' }"
                                @click="filters.assigned = 'me'"
                            >
                                <i class="pi pi-user" />
                                <span>Minhas</span>
                                <span class="mw-side__count">{{ mineCount }}</span>
                            </button>
                            <button
                                class="mw-side__item"
                                :class="{ 'is-active': filters.assigned === 'unassigned' }"
                                @click="filters.assigned = 'unassigned'"
                            >
                                <i class="pi pi-user-minus" />
                                <span>Não atribuídas</span>
                                <span class="mw-side__count" :class="{ 'is-warn': unassignedCount > 0 }">{{ unassignedCount }}</span>
                            </button>
                        </div>
                    </div>

                    <!-- Por status (kanban resumo — display-only, sem X) -->
                    <div class="mw-w mw-w--side">
                        <div class="mw-w__head">
                            <span class="mw-w__title"><i class="pi pi-chart-bar" /> Por status</span>
                        </div>
                        <div class="mw-side__list">
                            <div
                                v-for="col in KANBAN_COLUMNS"
                                :key="col.key"
                                class="mw-side__row"
                                :class="`is-${col.color}`"
                            >
                                <i :class="col.icon" />
                                <span>{{ col.label }}</span>
                                <span class="mw-side__count">{{ summary[col.key] || 0 }}</span>
                            </div>
                        </div>
                    </div>

                    <!-- Canais -->
                    <div class="mw-w mw-w--side">
                        <div class="mw-w__head">
                            <span class="mw-w__title"><i class="pi pi-send" /> Canais</span>
                            <button
                                v-if="filters.channel"
                                class="mw-side__clear-inline"
                                v-tooltip.top="'Limpar filtro de canal'"
                                aria-label="Limpar filtro de canal"
                                @click="filters.channel = null"
                            >
                                <i class="pi pi-times" />
                            </button>
                        </div>
                        <div class="mw-side__list">
                            <button
                                v-for="opt in CHANNEL_OPTIONS"
                                :key="String(opt.value)"
                                class="mw-side__item"
                                :class="{ 'is-active': filters.channel === opt.value }"
                                @click="filters.channel = opt.value"
                            >
                                <i v-if="opt.value" :class="['pi', channelIcon(opt.value)]" />
                                <i v-else class="pi pi-list" />
                                <span>{{ opt.label }}</span>
                            </button>
                        </div>
                    </div>

                </div>

                <!-- Footer fixo: "Limpar filtros" global (zera busca,
                     unread, atribuição e canal de uma vez). -->
                <Transition name="mw-clear">
                    <div v-if="hasActiveFilters" class="mw-side__footer">
                        <button class="mw-side__clear-all" @click="clearAllFilters">
                            <i class="pi pi-filter-slash" />
                            <span>Limpar filtros</span>
                        </button>
                    </div>
                </Transition>
            </aside>
            </Teleport>

            <!-- ═══ COL 2: Kanban grid ═══ -->
            <div class="mw-main">
                <!-- Kanban -->
                <div class="mw-kanban">
                    <div
                        v-for="col in KANBAN_COLUMNS"
                        :key="col.key"
                        class="mw-col"
                        :class="`is-${col.color}`"
                    >
                        <div class="mw-col__head">
                            <div class="mw-col__title">
                                <i :class="col.icon" />
                                <span>{{ col.label }}</span>
                            </div>
                            <span class="mw-col__count">{{ byKanban[col.key].length }}</span>
                        </div>
                        <div class="mw-col__body">
                            <!-- Skeleton só na primeira carga, na coluna que estiver vazia -->
                            <template v-if="carregandoInicial && !byKanban[col.key].length">
                                <div v-for="i in 2" :key="`csk-${col.key}-${i}`" class="mw-card mw-card--skeleton" aria-busy="true">
                                    <div style="display:flex; flex-direction:column; gap:6px; flex:1;">
                                        <span class="melissa-skeleton melissa-skeleton--title" :style="{ width: `${50 + (i * 13) % 30}%` }" />
                                        <span class="melissa-skeleton melissa-skeleton--text" style="width: 80%;" />
                                    </div>
                                </div>
                            </template>

                            <div v-else-if="!byKanban[col.key].length" class="mw-col__empty">
                                <i class="pi pi-comments" />
                                <span>Nenhuma conversa</span>
                            </div>

                            <button
                                v-for="t in byKanban[col.key]"
                                v-else
                                :key="t.thread_key"
                                class="mw-card"
                                @click="onCardClick(t)"
                            >
                                <div class="mw-card__head">
                                    <i :class="['pi', channelIcon(t.channel), 'mw-card__channel']" />
                                    <span class="mw-card__name">{{ contactLabel(t) }}</span>
                                    <span v-if="t.unread_count > 0" class="mw-card__unread">{{ t.unread_count }}</span>
                                </div>
                                <div class="mw-card__msg">
                                    <i v-if="t.last_message_direction === 'outbound'" class="pi pi-arrow-right text-[0.55rem] mr-1 opacity-60" />
                                    {{ truncate(t.last_message_body, 70) }}
                                </div>
                                <div v-if="tagsForThread(t.thread_key).length" class="mw-card__tags">
                                    <span
                                        v-for="tag in tagsForThread(t.thread_key)"
                                        :key="tag.id"
                                        class="mw-card__tag"
                                        :style="{ background: tag.color + '20', color: tag.color, borderColor: tag.color + '40' }"
                                    >
                                        <i v-if="tag.icon" :class="tag.icon" />
                                        {{ tag.name }}
                                    </span>
                                </div>
                                <div class="mw-card__foot">
                                    <span class="mw-card__time">{{ fmtRelative(t.last_message_at) }}</span>
                                    <span
                                        v-if="t.assigned_to"
                                        class="mw-card__assignee"
                                        :class="{ 'is-mine': t.assigned_to === currentUserId }"
                                        v-tooltip.top="t.assigned_to === currentUserId ? 'Atribuída a mim' : 'Atribuída a ' + (memberNameMap[t.assigned_to] || '')"
                                    >
                                        <i class="pi pi-user" />
                                        {{ t.assigned_to === currentUserId ? 'Eu' : assigneeLabel(t.assigned_to) }}
                                    </span>
                                    <span v-else-if="!t.patient_name" class="mw-card__unlinked">não vinculado</span>
                                </div>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>

<style scoped>
/* Convenção Melissa Page (blueprint §6) */
.mw-page {
    position: absolute;
    inset: 6px 6px calc(var(--m-dock-h, 76px) + 6px) 6px;
    z-index: 40;
    display: flex;
    flex-direction: column;
    background: var(--m-bg-medium);
    backdrop-filter: blur(32px) saturate(160%);
    -webkit-backdrop-filter: blur(32px) saturate(160%);
    border: 1px solid var(--m-border);
    border-radius: 18px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: var(--m-text);
    animation: mw-page-enter 240ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
@keyframes mw-page-enter {
    from { opacity: 0; transform: scale(0.985); }
    to   { opacity: 1; transform: scale(1); }
}

.mw-page__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--m-border);
    flex-shrink: 0;
    gap: 10px;
}
.mw-page__title {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    font-weight: 500;
    flex-wrap: wrap;
}
.mw-page__title > span:not(.mw-page__count):not(.mw-page__unread) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mw-page__count {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--m-accent);
    background: var(--m-accent-soft);
    border: 1px solid color-mix(in srgb, var(--m-accent) 35%, transparent);
    padding: 2px 8px;
    border-radius: 999px;
}
.mw-page__unread {
    font-size: 0.7rem;
    font-weight: 600;
    color: rgb(248, 113, 113);
    background: rgba(248, 113, 113, 0.12);
    border: 1px solid rgba(248, 113, 113, 0.3);
    padding: 2px 8px;
    border-radius: 999px;
}
.mw-page__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.mw-close,
.mw-head-btn {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    background: var(--m-bg-soft);
    border: 1px solid var(--m-border);
    color: var(--m-text);
    border-radius: 9px;
    cursor: pointer;
    font-family: inherit;
    transition: background-color 140ms ease;
}
.mw-close:hover,
.mw-head-btn:hover { background: var(--m-bg-soft-hover); }
.mw-head-btn > i { font-size: 0.85rem; }
.mw-head-btn--compact-only { display: none; }

/* Search inline (xl+) */
.mw-search {
    position: relative;
    width: 240px;
}
.mw-search__icon {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    color: var(--m-text-muted);
    font-size: 0.78rem;
}
.mw-search__input {
    width: 100%;
    height: 32px;
    background: var(--m-bg-soft);
    border: 1px solid var(--m-border);
    color: var(--m-text);
    padding: 0 12px 0 32px;
    border-radius: 9px;
    font-size: 0.78rem;
    font-family: inherit;
    outline: none;
    transition: border-color 140ms ease, background-color 140ms ease;
}
.mw-search__input:focus {
    background: var(--m-bg-soft-hover);
    border-color: var(--m-border-strong);
}
.mw-search__input::placeholder { color: var(--m-text-faint); }

/* Menu mobile */
.mw-menu-btn {
    display: none;
    height: 32px;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    background: var(--m-accent);
    border: 1px solid var(--m-accent);
    color: white;
    padding: 0 11px;
    border-radius: 9px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    transition: background-color 140ms ease, transform 140ms ease;
}
.mw-menu-btn:hover {
    background: color-mix(in srgb, var(--m-accent) 88%, white);
    transform: translateY(-1px);
}
.mw-menu-btn > i { font-size: 0.85rem; }

/* Subheader explicativo (blueprint §9) */
.mw-subheader {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--m-border);
    background: var(--m-bg-soft);
    font-size: 0.78rem;
    color: var(--m-text-muted);
    line-height: 1.45;
    flex-shrink: 0;
}
.mw-subheader__icon {
    color: var(--p-primary-color);
    font-size: 0.92rem;
    flex-shrink: 0;
    margin-top: 1px;
}
.mw-subheader__text { flex: 1; min-width: 0; }
.mw-subheader__text strong { color: var(--m-text); font-weight: 600; }

/* Body — sem padding/gap; a sidebar tem bg+border-right próprios e o
   main column controla seu padding interno. Espelha o pattern usado
   em MelissaGrupos / MelissaTags / MelissaMedicos. */
.mw-body {
    flex: 1;
    display: flex;
    min-height: 0;
    position: relative;
    gap: 0;
    padding: 0;
}

/* Aside — 2 zonas: __scroll (cards) + __footer (Limpar filtros fixo).
   bg colorido próprio (--m-bg-soft) + border-right pra separar
   visualmente da coluna principal. */
.mw-side {
    width: 280px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--m-bg-soft);
    border-right: 1px solid var(--m-border);
    overflow: hidden;
}
.mw-side__scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    scrollbar-width: thin;
    scrollbar-color: var(--m-border-strong) transparent;
}
.mw-side__scroll::-webkit-scrollbar { width: 5px; }
.mw-side__scroll::-webkit-scrollbar-thumb {
    background: var(--m-border-strong);
    border-radius: 3px;
}

/* Footer fixo no bottom da sidebar (fora do scroll dos filter cards).
   Aparece com fade+collapse quando algum filtro está ativo. */
.mw-side__footer {
    flex-shrink: 0;
    padding: 12px;
    background: var(--m-bg-soft);
    border-top: 1px solid var(--m-border);
}
.mw-side__clear-all {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 12px;
    background: var(--m-bg-medium);
    border: 1px solid var(--m-border);
    color: var(--m-text);
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}
.mw-side__clear-all:hover {
    background: var(--m-bg-soft-hover);
    border-color: var(--m-border-strong);
    color: var(--m-text);
}
.mw-side__clear-all > i {
    font-size: 0.78rem;
    color: var(--m-text-muted);
    transition: color 140ms ease;
}
.mw-side__clear-all:hover > i { color: var(--m-text); }

/* X inline ao lado do título de cada filter card — limpa o filtro
   individual. Espelha o pattern do MelissaPacientes/Grupos/Tags. */
.mw-side__clear-inline {
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    background: transparent;
    border: 1px solid color-mix(in srgb, rgb(220, 38, 38) 30%, var(--m-border));
    color: rgb(220, 38, 38);
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    transition: background-color 140ms ease, border-color 140ms ease;
}
.mw-side__clear-inline:hover {
    background: rgba(220, 38, 38, 0.10);
    border-color: rgba(220, 38, 38, 0.55);
}
.mw-side__clear-inline > i { font-size: 0.6rem; }

/* Transition do footer "Limpar filtros" */
.mw-clear-enter-active,
.mw-clear-leave-active {
    transition: opacity 220ms ease, transform 220ms ease, max-height 240ms ease;
    overflow: hidden;
}
.mw-clear-enter-from,
.mw-clear-leave-to {
    opacity: 0;
    transform: translateY(6px);
    max-height: 0;
}
.mw-clear-enter-to,
.mw-clear-leave-from {
    opacity: 1;
    transform: translateY(0);
    max-height: 80px;
}

/* Card-base — alinhado com .ma-w / .mp-w / .mcr-w: surface --m-bg-medium
   pra destacar do bg da sidebar (--m-bg-soft). */
.mw-w {
    background: var(--m-bg-medium);
    border: 1px solid var(--m-border);
    border-radius: 12px;
    padding: 12px;
}
/* Modifier pros cards dentro da .mw-side — margem lateral + sombra
   sutil pra elevar sobre o bg da sidebar. Espelha .mc-w--side, .mt-w--side. */
.mw-w--side {
    margin: 12px 12px 0;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.mw-w--side:last-of-type { margin-bottom: 12px; }
.mw-w__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.mw-w__title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 600;
}
.mw-w__title > i { color: var(--m-text-muted); font-size: 0.78rem; }

.mw-side__list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mw-side__item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--m-text);
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.82rem;
    text-align: left;
    transition: background-color 140ms ease, border-color 140ms ease;
}
.mw-side__item:hover { background: var(--m-bg-soft-hover); }
.mw-side__item.is-active {
    background: var(--m-accent-soft);
    border-color: color-mix(in srgb, var(--m-accent) 35%, var(--m-border));
}
.mw-side__item.is-warn { background: rgba(248, 113, 113, 0.05); }
.mw-side__item > i {
    color: var(--m-text-muted);
    font-size: 0.75rem;
    width: 14px;
    text-align: center;
}
.mw-side__item > span:first-of-type { flex: 1; }

.mw-side__count {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--m-text-muted);
    background: var(--m-bg-medium);
    padding: 1px 7px;
    border-radius: 999px;
    min-width: 22px;
    text-align: center;
}
.mw-side__count.is-danger {
    background: rgba(248, 113, 113, 0.15);
    color: rgb(248, 113, 113);
}
.mw-side__count.is-warn {
    background: rgba(251, 191, 36, 0.15);
    color: rgb(251, 191, 36);
}

.mw-side__row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-radius: 10px;
    border: 1px solid var(--m-border);
    background: var(--m-bg-medium);
    font-size: 0.78rem;
}
.mw-side__row > span:first-of-type { flex: 1; }
.mw-side__row > i { font-size: 0.75rem; }
.mw-side__row.is-red { border-color: rgba(248, 113, 113, 0.3); background: rgba(248, 113, 113, 0.05); }
.mw-side__row.is-red > i { color: rgb(248, 113, 113); }
.mw-side__row.is-amber { border-color: rgba(251, 191, 36, 0.3); background: rgba(251, 191, 36, 0.05); }
.mw-side__row.is-amber > i { color: rgb(251, 191, 36); }
.mw-side__row.is-blue { border-color: rgba(96, 165, 250, 0.3); background: rgba(96, 165, 250, 0.05); }
.mw-side__row.is-blue > i { color: rgb(96, 165, 250); }
.mw-side__row.is-emerald { border-color: rgba(74, 222, 128, 0.3); background: rgba(74, 222, 128, 0.05); }
.mw-side__row.is-emerald > i { color: rgb(74, 222, 128); }

.mw-alert {
    display: flex;
    gap: 10px;
    margin: 12px 12px 0;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid rgba(251, 191, 36, 0.3);
    background: rgba(251, 191, 36, 0.05);
    color: rgb(251, 191, 36);
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.mw-alert:last-child { margin-bottom: 12px; }
.mw-alert > i { font-size: 0.85rem; margin-top: 2px; }
.mw-alert__title {
    font-size: 0.78rem;
    font-weight: 600;
}
.mw-alert__hint {
    font-size: 0.7rem;
    color: var(--m-text-muted);
    margin-top: 2px;
}

/* Main — recebe padding interno (o body não tem mais padding/gap;
   sidebar fica colada à esquerda com border-right). */
.mw-main {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 12px;
}

/* Kanban */
.mw-kanban {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    min-height: 0;
}
.mw-col {
    display: flex;
    flex-direction: column;
    /* Coluna do kanban também é "card" — mesma surface dos demais. */
    background: var(--m-bg-medium);
    border: 1px solid var(--m-border);
    border-radius: 12px;
    overflow: hidden;
    min-height: 0;
}
.mw-col.is-red { border-color: rgba(248, 113, 113, 0.35); }
.mw-col.is-amber { border-color: rgba(251, 191, 36, 0.35); }
.mw-col.is-blue { border-color: rgba(96, 165, 250, 0.35); }
.mw-col.is-emerald { border-color: rgba(74, 222, 128, 0.35); }

.mw-col__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid var(--m-border);
    flex-shrink: 0;
}
.mw-col.is-red .mw-col__head { background: rgba(248, 113, 113, 0.05); border-bottom-color: rgba(248, 113, 113, 0.25); }
.mw-col.is-amber .mw-col__head { background: rgba(251, 191, 36, 0.05); border-bottom-color: rgba(251, 191, 36, 0.25); }
.mw-col.is-blue .mw-col__head { background: rgba(96, 165, 250, 0.05); border-bottom-color: rgba(96, 165, 250, 0.25); }
.mw-col.is-emerald .mw-col__head { background: rgba(74, 222, 128, 0.05); border-bottom-color: rgba(74, 222, 128, 0.25); }

.mw-col__title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 600;
}
.mw-col__title > i { font-size: 0.78rem; }
.mw-col.is-red .mw-col__title > i { color: rgb(248, 113, 113); }
.mw-col.is-amber .mw-col__title > i { color: rgb(251, 191, 36); }
.mw-col.is-blue .mw-col__title > i { color: rgb(96, 165, 250); }
.mw-col.is-emerald .mw-col__title > i { color: rgb(74, 222, 128); }

.mw-col__count {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--m-text);
    background: var(--m-bg-medium);
    padding: 1px 7px;
    border-radius: 999px;
    min-width: 22px;
    text-align: center;
}
.mw-col__body {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--m-border-strong) transparent;
}
.mw-col__body::-webkit-scrollbar { width: 5px; }
.mw-col__body::-webkit-scrollbar-thumb {
    background: var(--m-border-strong);
    border-radius: 3px;
}
.mw-col__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 24px 12px;
    color: var(--m-text-faint);
    font-size: 0.72rem;
    font-style: italic;
}
.mw-col__empty > i { font-size: 1.5rem; opacity: 0.4; }

/* Card de conversa — fica DENTRO da coluna .mw-col (que agora usa
   --m-bg-medium). Pra ter contraste, o card usa --m-bg-soft (mais sutil). */
.mw-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    background: var(--m-bg-soft);
    border: 1px solid var(--m-border);
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    color: var(--m-text);
    transition: background-color 140ms ease, border-color 140ms ease, transform 140ms ease;
}
.mw-card:hover {
    background: var(--m-bg-soft-hover);
    border-color: color-mix(in srgb, var(--m-accent) 40%, var(--m-border));
    transform: translateY(-1px);
}
.mw-card--skeleton { cursor: default; pointer-events: none; opacity: 0.95; }
.mw-card--skeleton:hover { background: var(--m-bg-soft); transform: none; }

.mw-card__head {
    display: flex;
    align-items: center;
    gap: 6px;
}
.mw-card__channel {
    color: var(--m-text-muted);
    font-size: 0.7rem;
}
.mw-card__name {
    flex: 1;
    min-width: 0;
    font-size: 0.82rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mw-card__unread {
    font-size: 0.62rem;
    font-weight: 700;
    color: white;
    background: rgb(248, 113, 113);
    padding: 1px 6px;
    border-radius: 999px;
    min-width: 18px;
    text-align: center;
}
.mw-card__msg {
    font-size: 0.74rem;
    color: var(--m-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mw-card__tags {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.mw-card__tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.6rem;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 999px;
    border: 1px solid;
    line-height: 1.4;
}
.mw-card__tag > i { font-size: 0.55rem; }

.mw-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    font-size: 0.65rem;
    color: var(--m-text-faint);
}
.mw-card__time { font-weight: 500; }
.mw-card__assignee {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px;
    border-radius: 999px;
    border: 1px solid var(--m-border);
    background: var(--m-bg-soft);
    color: var(--m-text);
    font-size: 0.6rem;
    font-weight: 600;
}
.mw-card__assignee.is-mine {
    background: var(--m-accent-soft);
    border-color: color-mix(in srgb, var(--m-accent) 35%, var(--m-border));
    color: var(--m-accent);
}
.mw-card__assignee > i { font-size: 0.55rem; }
.mw-card__unlinked { font-style: italic; }

/* Popover */
.mw-actions {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 240px;
    padding: 4px;
}
.mw-actions__group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mw-actions__label {
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--text-color-secondary, var(--m-text-faint));
    font-size: 0.62rem;
    font-weight: 600;
}

/* Drawer mobile (blueprint §6) */
.mw-mobile-drawer {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    height: 100dvh;
    width: min(360px, 88vw);
    z-index: 80;
    background: var(--m-bg-medium);
    backdrop-filter: blur(28px) saturate(160%);
    -webkit-backdrop-filter: blur(28px) saturate(160%);
    border-right: 1px solid var(--m-border);
    transform: translateX(-100%);
    transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--m-text);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    display: flex;
    flex-direction: column;
}
.mw-mobile-drawer.is-open { transform: translateX(0); }
.mw-mobile-drawer__scroll {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.mw-mobile-drawer__scroll .mw-side {
    flex: 1;
    min-height: 0;
    width: 100%;
    overflow: hidden;
    background: transparent;
    border-right: none;
    display: flex;
    flex-direction: column;
}
.mw-mobile-drawer__scroll .mw-side__scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    scrollbar-width: thin;
    scrollbar-color: var(--m-border-strong) transparent;
}
.mw-mobile-drawer__scroll .mw-side__scroll::-webkit-scrollbar { width: 5px; }
.mw-mobile-drawer__scroll .mw-side__scroll::-webkit-scrollbar-thumb {
    background: var(--m-border-strong);
    border-radius: 3px;
}
.mw-mobile-drawer__scroll .mw-w--side {
    margin: 0;
    flex-shrink: 0;
}
.mw-mobile-drawer__scroll .mw-w--side:last-of-type { margin-bottom: 0; }
.mw-mobile-drawer__scroll .mw-alert { margin: 0; flex-shrink: 0; }
.mw-mobile-drawer__scroll .mw-side__footer {
    flex-shrink: 0;
    margin: 0;
    padding: 12px;
    background: var(--m-bg-medium);
    border-top: 1px solid var(--m-border);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
}
.mw-mobile-drawer__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 79;
}
.mw-drawer-fade-enter-active,
.mw-drawer-fade-leave-active { transition: opacity 200ms ease; }
.mw-drawer-fade-enter-from,
.mw-drawer-fade-leave-to { opacity: 0; }

/* ═══ Compact (<xl) — busca migra pra popover, kanban 2-col ═══ */
@media (max-width: 1279px) {
    .mw-search--xl-only { display: none; }
    .mw-head-btn--compact-only { display: grid; }
    .mw-kanban { grid-template-columns: repeat(2, 1fr); }
}

/* ═══ Mobile (<lg) — drawer + kanban 1-col stacked ═══
   Em mobile o kanban vira flex column (stacked) e o scroll passa a ser
   global no .mw-main (não interno por coluna). Cada .mw-col cresce com
   o conteúdo + min-height pra empty state ter altura visível. */
@media (max-width: 1023px) {
    .mw-body { flex-direction: column; padding: 0; }
    .mw-main {
        width: 100%;
        padding: 8px;
        overflow-y: auto;
    }
    .mw-kanban {
        display: flex;
        flex-direction: column;
        flex: none;
        gap: 8px;
    }
    .mw-col {
        flex: none;
        min-height: 200px;
    }
    .mw-col__body {
        flex: none;
        overflow: visible;
        min-height: 80px;
    }
    .mw-page__title > span:first-of-type { display: none; }
    .mw-page__title > i:first-child { display: none; }
    .mw-menu-btn--mobile-only { display: inline-flex; }
}
</style>
