<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, KANBAN_COLUMNS } from '@/composables/useConversations';
import { useConversationTags } from '@/composables/useConversationTags';
import { useTenantStore } from '@/stores/tenantStore';
import { useConversationDrawerStore } from '@/stores/conversationDrawerStore';
import MelissaConversasSidebar from './MelissaConversasSidebar.vue';
import MelissaConversasCard from './MelissaConversasCard.vue';
// 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, currentUserId } = 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;
});

// Cache O(1) por thread_key — antes tagsForThread era chamado in-template
// no v-for de cards, recriava array a cada render. Agora computa uma vez
// quando threadTagsMap ou tagById muda (raro), lookup O(1) por card.
const EMPTY_TAGS = Object.freeze([]);
const tagsByThreadKey = computed(() => {
    const out = new Map();
    const tags = tagById.value;
    for (const [key, ids] of threadTagsMap.value) {
        const arr = [];
        for (const id of ids) {
            const t = tags[id];
            if (t) arr.push(t);
        }
        out.set(key, arr);
    }
    return out;
});
function tagsForThread(threadKey) {
    return tagsByThreadKey.value.get(threadKey) || EMPTY_TAGS;
}
async function reloadThreadTags() {
    // Tags pra TODOS os threads (nao so filtered) — antes, mudar de filtro
    // fazia tags piscarem (threads novas apareciam sem tags ate o watch
    // disparar de novo). Carregar de threads.value uma so vez cobre todos
    // os filtros sem refetch.
    const keys = threads.value.map((t) => t.thread_key);
    threadTagsMap.value = await tagsApi.loadForThreads(keys);
}

// Debounce de reload de tags — antes, watch em filteredThreads.length
// disparava reloadThreadTags em cada char digitado na busca (ou flick de
// filtro). 200ms agrupa rajadas; tambem cobre o caso de realtime que
// substitui threads.value (load() do composable).
let _tagsReloadTimer = null;
function _scheduleTagsReload() {
    if (_tagsReloadTimer) clearTimeout(_tagsReloadTimer);
    _tagsReloadTimer = setTimeout(() => {
        _tagsReloadTimer = null;
        reloadThreadTags();
    }, 200);
}

// Atribuição (currentUserId vem do useConversations — fonte unica)
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;
}
// assigneeLabel migrou pra MelissaConversasCard (usa props.memberNameMap).

// Constantes
// KANBAN_COLUMNS importado de @/composables/useConversations (fonte unica).
// CHANNEL_OPTIONS movido pra @/utils/channelMeta (compartilhado com Sidebar/Card).

// Helpers fmtRelative/channelIcon/truncate/contactLabel migraram pra
// MelissaConversasCard (uso unico la). Se aparecer 3o consumidor,
// vale extrair pra utils/formatters.js.

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);

// hasActiveFilters/clearAllFilters migraram pra MelissaConversasSidebar
// (uso unico no footer "Limpar filtros" do aside).

// 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();
    // reloadThreadTags removido daqui — o watch(threads) abaixo dispara
    // automaticamente apos load() resolver. Evita race com currentUserId
    // (que tambem resolve async) e duplica fetch.
    await Promise.all([tagsApi.loadAllTags(), loadMemberNames()]);
});
onBeforeUnmount(() => {
    if (_mqMobile) _mqMobile.removeEventListener('change', _onMqMobileChange);
    if (_mqCompact) _mqCompact.removeEventListener('change', _onMqCompactChange);
    if (_tagsReloadTimer) {
        clearTimeout(_tagsReloadTimer);
        _tagsReloadTimer = null;
    }
    unsubscribeRealtime();
});

// Watch em threads (re-assign do array via load) dispara reload de tags
// debounced — substitui o antigo watch(filteredThreads.length) que era
// ineficiente (qualquer mudanca de filtro recarregava todas as tags).
// deep:false porque load() substitui a ref inteira, nao mutate interno.
watch(threads, _scheduleTagsReload, { flush: 'post' });

// Recarrega lista quando drawer fecha (status pode ter mudado, msg lida etc).
// await load() antes pra que o watch(threads) acima ja tenha o array novo
// quando reloadThreadTags rodar via debounce.
watch(() => drawerStore.isOpen, async (isOpen) => {
    if (isOpen) return;
    await load();
});

// Token monotonico — se user troca tenant A→B→A rapido, evita fetches
// "antigos" sobrescreverem threads do tenant atual. Declarado fora do
// watch pra ficar acessivel em multiplas invocacoes (cresce monotonicamente).
let _tenantSwitchToken = 0;
watch(() => tenantStore.activeTenantId, async (newTid, oldTid) => {
    if (newTid === oldTid) return;
    unsubscribeRealtime();
    const myToken = ++_tenantSwitchToken;
    await load();
    if (myToken !== _tenantSwitchToken) return;
    subscribeRealtime();
});
</script>

<template>
    <!-- Drawer host (blueprint §2) -->
    <aside
        class="mw-mobile-drawer fixed top-0 left-0 z-[80] w-[min(360px,88vw)] h-screen [height:100dvh] flex flex-col bg-[var(--m-bg-medium)] backdrop-blur-[28px] backdrop-saturate-[160%] border-r border-[var(--m-border)] transition-transform duration-[250ms] [transition-timing-function:cubic-bezier(0.4,0,0.2,1)] text-[var(--m-text)] [font-family:'Segoe_UI',system-ui,-apple-system,sans-serif]"
        :class="drawerOpen ? 'translate-x-0' : '-translate-x-full'"
        v-show="isMobile"
        aria-label="Filtros & atribuição"
    >
        <div id="mw-mobile-drawer-target" class="mw-mobile-drawer__scroll flex-1 min-h-0 overflow-hidden flex flex-col" />
    </aside>
    <Transition name="mw-drawer-fade">
        <div
            v-if="isMobile && drawerOpen"
            class="mw-mobile-drawer__backdrop fixed inset-0 z-[79] bg-black/45 backdrop-blur-[4px]"
            @click="fecharDrawer"
        />
    </Transition>

    <section
        class="mw-page absolute inset-[6px] [bottom:calc(var(--m-dock-h,76px)+6px)] z-40 flex flex-col bg-[var(--m-bg-medium)] backdrop-blur-[32px] backdrop-saturate-[160%] border border-[var(--m-border)] rounded-[18px] shadow-[0_16px_48px_rgba(0,0,0,0.4)] overflow-hidden text-[var(--m-text)] [font-family:'Segoe_UI',system-ui,-apple-system,sans-serif] [animation:mw-page-enter_240ms_cubic-bezier(0.2,0.7,0.3,1)]"
        :inert="(drawerOpen && isMobile) || null"
    >
        <header class="mw-page__head flex items-center justify-between px-[18px] py-[14px] border-b border-[var(--m-border)] flex-shrink-0 gap-2.5">
            <button
                class="mw-menu-btn mw-menu-btn--mobile-only hidden max-[1023px]:inline-flex h-8 items-center gap-1.5 flex-shrink-0 px-[11px] rounded-[9px] cursor-pointer text-[0.78rem] font-semibold text-white bg-[var(--m-accent)] border border-[var(--m-accent)] [font-family:inherit] transition-[background-color,transform] duration-[140ms] hover:bg-[color-mix(in_srgb,var(--m-accent)_88%,white)] hover:-translate-y-px [&>i]:text-[0.85rem]"
                :aria-expanded="drawerOpen"
                aria-controls="mw-mobile-drawer-target"
                v-tooltip.bottom="'Filtros & atribuição'"
                @click="toggleDrawer"
            >
                <i class="pi pi-bars" aria-hidden="true" />
                <span>Menu Conversas</span>
            </button>
            <div class="mw-page__title flex-1 min-w-0 flex items-center gap-2.5 text-[1rem] font-medium flex-wrap [&>i:first-child]:max-[1023px]:hidden">
                <i class="pi pi-comments text-emerald-300" aria-hidden="true" />
                <span class="overflow-hidden text-ellipsis whitespace-nowrap max-[1023px]:hidden">Conversas</span>
                <span class="mw-page__count text-[0.7rem] font-semibold text-[var(--m-accent)] bg-[var(--m-accent-soft)] border border-[color-mix(in_srgb,var(--m-accent)_35%,transparent)] px-2 py-0.5 rounded-full">{{ summary.total }}</span>
                <span v-if="summary.unreadTotal > 0" class="mw-page__unread text-[0.7rem] font-semibold text-[rgb(248,113,113)] bg-[rgba(248,113,113,0.12)] border border-[rgba(248,113,113,0.3)] px-2 py-0.5 rounded-full">
                    {{ summary.unreadTotal }} não lida{{ summary.unreadTotal !== 1 ? 's' : '' }}
                </span>
            </div>
            <div class="mw-page__actions flex items-center gap-2 flex-shrink-0">
                <div class="mw-search mw-search--xl-only relative w-[240px] max-[1279px]:hidden">
                    <i class="pi pi-search mw-search__icon absolute top-1/2 left-3 -translate-y-1/2 text-[var(--m-text-muted)] text-[0.78rem]" aria-hidden="true" />
                    <input
                        v-model="filters.search"
                        type="text"
                        placeholder="Buscar paciente, número ou mensagem"
                        maxlength="120"
                        aria-label="Buscar paciente, número ou mensagem"
                        class="mw-search__input w-full h-8 bg-[var(--m-bg-soft)] border border-[var(--m-border)] text-[var(--m-text)] px-3 pl-8 rounded-[9px] text-[0.78rem] [font-family:inherit] outline-none transition-[border-color,background-color] duration-[140ms] focus:bg-[var(--m-bg-soft-hover)] focus:border-[var(--m-border-strong)] placeholder:text-[var(--m-text-faint)]"
                    />
                </div>
                <button
                    class="mw-head-btn mw-head-btn--compact-only hidden max-[1279px]:grid w-8 h-8 place-items-center bg-[var(--m-bg-soft)] border border-[var(--m-border)] text-[var(--m-text)] rounded-[9px] cursor-pointer [font-family:inherit] transition-colors duration-[140ms] hover:bg-[var(--m-bg-soft-hover)] [&>i]:text-[0.85rem]"
                    aria-label="Buscar"
                    v-tooltip.bottom="'Buscar'"
                    @click="openActions"
                >
                    <i class="pi pi-search" aria-hidden="true" />
                </button>
                <button
                    class="mw-head-btn w-8 h-8 grid place-items-center bg-[var(--m-bg-soft)] border border-[var(--m-border)] text-[var(--m-text)] rounded-[9px] cursor-pointer [font-family:inherit] transition-colors duration-[140ms] hover:bg-[var(--m-bg-soft-hover)] [&>i]:text-[0.85rem]"
                    :aria-label="loading ? 'Recarregando…' : 'Recarregar lista'"
                    v-tooltip.bottom="'Recarregar'"
                    :disabled="loading"
                    @click="load"
                >
                    <i :class="loading ? 'pi pi-spin pi-spinner' : 'pi pi-refresh'" aria-hidden="true" />
                </button>
                <button
                    class="mw-close w-8 h-8 grid place-items-center bg-[var(--m-bg-soft)] border border-[var(--m-border)] text-[var(--m-text)] rounded-[9px] cursor-pointer [font-family:inherit] transition-colors duration-[140ms] hover:bg-[var(--m-bg-soft-hover)]"
                    aria-label="Voltar ao resumo (Esc)"
                    v-tooltip.bottom="'Voltar ao resumo (Esc)'"
                    @click="emit('close')"
                >
                    <i class="pi pi-times" aria-hidden="true" />
                </button>
            </div>
        </header>

        <Popover ref="actionsPopRef" class="mw-actions-pop">
            <div class="mw-actions flex flex-col gap-3.5 min-w-[240px] p-1">
                <div class="mw-actions__group flex flex-col gap-1.5">
                    <div class="mw-actions__label uppercase tracking-[0.14em] text-[var(--text-color-secondary,var(--m-text-faint))] text-[0.62rem] font-semibold">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 flex items-start gap-2.5 px-[18px] py-2.5 border-b border-[var(--m-border)] bg-[var(--m-bg-soft)] text-[0.78rem] text-[var(--m-text-muted)] leading-[1.45] flex-shrink-0" role="note">
            <i class="pi pi-info-circle mw-subheader__icon text-[var(--p-primary-color)] text-[0.92rem] flex-shrink-0 mt-px" aria-hidden="true" />
            <span class="mw-subheader__text flex-1 min-w-0 [&>strong]:text-[var(--m-text)] [&>strong]:font-semibold">
                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 flex-1 flex min-h-0 relative max-[1023px]:flex-col">
            <!-- ═══ COL 1: Filtros + atribuição + canais + status ═══ -->
            <Teleport to="#mw-mobile-drawer-target" :disabled="!isMobile">
                <MelissaConversasSidebar
                    :filters="filters"
                    :summary="summary"
                    :unlinked-count="unlinkedCount"
                    :mine-count="mineCount"
                    :unassigned-count="unassignedCount"
                />
            </Teleport>

            <!-- ═══ COL 2: Kanban grid ═══ -->
            <div class="mw-main flex-1 min-w-0 overflow-hidden flex flex-col p-3 max-[1023px]:w-full max-[1023px]:p-2 max-[1023px]:overflow-y-auto">
                <!-- Kanban: 4 cols em desktop, 2 cols em <xl, stacked column em <lg -->
                <div class="mw-kanban flex-1 grid grid-cols-4 gap-3 min-h-0 max-[1279px]:grid-cols-2 max-[1023px]:flex max-[1023px]:flex-col max-[1023px]:flex-none max-[1023px]:gap-2">
                    <div
                        v-for="col in KANBAN_COLUMNS"
                        :key="col.key"
                        class="mw-col flex flex-col bg-[var(--m-bg-medium)] border border-[var(--m-border)] rounded-xl overflow-hidden min-h-0 max-[1023px]:flex-none max-[1023px]:min-h-[200px]"
                        :class="`is-${col.color}`"
                    >
                        <div class="mw-col__head flex items-center justify-between px-3 py-2.5 border-b border-[var(--m-border)] flex-shrink-0">
                            <div class="mw-col__title inline-flex items-center gap-1.5 text-[0.78rem] font-semibold [&>i]:text-[0.78rem]">
                                <i :class="col.icon" aria-hidden="true" />
                                <span>{{ col.label }}</span>
                            </div>
                            <span
                                class="mw-col__count text-[0.65rem] font-semibold text-[var(--m-text)] bg-[var(--m-bg-medium)] px-1.5 py-px rounded-full min-w-[22px] text-center"
                                :aria-label="`${byKanban[col.key].length} conversas em ${col.label}`"
                            >{{ byKanban[col.key].length }}</span>
                        </div>
                        <div
                            class="mw-col__body flex-1 overflow-y-auto p-2 flex flex-col gap-2 max-[1023px]:flex-none max-[1023px]:overflow-visible max-[1023px]:min-h-[80px]"
                            :aria-busy="carregandoInicial && !byKanban[col.key].length"
                        >
                            <!-- Skeleton só na primeira carga, na coluna que estiver vazia.
                                 Estrutura inline (nao usa MelissaConversasCard pq o markup
                                 eh simplificado pra placeholder visual). -->
                            <template v-if="carregandoInicial && !byKanban[col.key].length">
                                <div
                                    v-for="i in 2"
                                    :key="`csk-${col.key}-${i}`"
                                    class="flex flex-col gap-1.5 px-3 py-2.5 bg-[var(--m-bg-soft)] border border-[var(--m-border)] rounded-[10px] cursor-default pointer-events-none opacity-95"
                                    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 flex flex-col items-center gap-1.5 px-3 py-6 text-[var(--m-text-faint)] text-[0.72rem] italic [&>i]:text-2xl [&>i]:opacity-40"
                            >
                                <i class="pi pi-comments" aria-hidden="true" />
                                <span>Nenhuma conversa</span>
                            </div>

                            <MelissaConversasCard
                                v-for="t in byKanban[col.key]"
                                v-else
                                :key="t.thread_key"
                                :thread="t"
                                :tags="tagsForThread(t.thread_key)"
                                :current-user-id="currentUserId"
                                :member-name-map="memberNameMap"
                                @click="onCardClick(t)"
                            />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>

<style scoped>
/* Maioria das regras (.mw-page/.mw-page__*, .mw-search*, .mw-close,
   .mw-head-btn*, .mw-menu-btn*, .mw-subheader*, .mw-body, .mw-main,
   .mw-kanban, .mw-col base, .mw-col__head/title/count/body/empty,
   .mw-actions*, .mw-mobile-drawer + backdrop) migrou pra Tailwind
   utilities no template. Media queries `@media (max-width: 1279px)` e
   `@media (max-width: 1023px)` substituidas por max-[1279px]: e
   max-[1023px]: arbitrarios. Aqui ficam SO:
   - @keyframes mw-page-enter (animation declarada)
   - State modifiers .mw-col.is-{red,amber,blue,emerald} + variantes
     no head/title/i (cores fixas RGB por kanban column — Tailwind
     replicaria 4× as classes por elemento sem ganho de legibilidade)
   - Scrollbar pseudo-element .mw-col__body::-webkit-scrollbar
   - Cross-teleport :deep(.mw-side*) overrides do drawer mobile
   - Vue Transition .mw-drawer-fade-* */

@keyframes mw-page-enter {
    from { opacity: 0; transform: scale(0.985); }
    to   { opacity: 1; transform: scale(1); }
}

/* Kanban col — borda + heads coloridos por status (cores fixas RGB) */
.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.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.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); }

/* Scrollbar do kanban col body (sem utility Tailwind) */
.mw-col__body {
    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;
}

/* Cross-teleport overrides: quando MelissaConversasSidebar eh teleportado
   pra dentro do drawer mobile, classes internas (.mw-side*, .mw-w--side,
   .mw-alert) ficam scoped ao componente FILHO. Usamos :deep() pra furar
   o scope e atingi-las daqui. */
.mw-mobile-drawer__scroll :deep(.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 :deep(.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 :deep(.mw-side__scroll::-webkit-scrollbar) { width: 5px; }
.mw-mobile-drawer__scroll :deep(.mw-side__scroll::-webkit-scrollbar-thumb) {
    background: var(--m-border-strong);
    border-radius: 3px;
}
.mw-mobile-drawer__scroll :deep(.mw-w--side) {
    margin: 0;
    flex-shrink: 0;
}
.mw-mobile-drawer__scroll :deep(.mw-w--side:last-of-type) { margin-bottom: 0; }
.mw-mobile-drawer__scroll :deep(.mw-alert) { margin: 0; flex-shrink: 0; }
.mw-mobile-drawer__scroll :deep(.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%);
}

/* Vue Transition do backdrop do drawer mobile */
.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; }
</style>
