<script setup>
/*
 * MelissaSeguranca — Pagina nativa Melissa pra "Seguranca".
 *
 * Substitui o embed cfg-seguranca que vivia dentro do MelissaConfiguracoes.
 * Layout 2-col:
 *   - COL 1 (sidebar) — Card "Estado da conta" (email + sessao ativa) +
 *     Card "Boas praticas" (4 dicas)
 *   - COL 2 (main) — Card "Trocar senha" (3 password inputs + barra de
 *     forca + botoes Enviar link / Trocar senha)
 *
 * Logica espelhada do SecurityPage.vue (auth.signInWithPassword pra
 * confirmar senha atual + auth.updateUser pra trocar + signOut global
 * apos sucesso por seguranca; reset por email opcional).
 */
import { ref, computed, onMounted } from 'vue';
import MelissaConfigList from './MelissaConfigList.vue';
import { useToast } from 'primevue/usetoast';
import { supabase } from '@/lib/supabase/client';
// InputText/Password/Button: auto via PrimeVueResolver

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

const toast = useToast();

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

// Toggle entre cards (default) e lista de configs (alterna inline na sidebar)
const cfgOpen = ref(false);
function toggleCfg() { cfgOpen.value = !cfgOpen.value; }
function fecharCfg() { cfgOpen.value = false; }

// ── Estado ─────────────────────────────────────────────────
const userEmail = ref('');
const loading = ref(false);
const loadingReset = ref(false);
const done = ref(false);

const currentPassword = ref('');
const newPassword = ref('');
const confirmPassword = ref('');

// ── Validações de senha ────────────────────────────────────
function isStrongEnough(p) {
    return /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}$/.test(p || '');
}

const strengthScore = computed(() => {
    const p = newPassword.value;
    if (!p) return 0;
    let s = 0;
    if (p.length >= 8) s++;
    if (/[A-Z]/.test(p)) s++;
    if (/[a-z]/.test(p)) s++;
    if (/\d/.test(p)) s++;
    return s;
});

const strengthLabel = computed(() => {
    const labels = ['', 'Muito fraca', 'Fraca', 'Boa', 'Forte'];
    return labels[strengthScore.value] || '';
});

const strengthColors = ['', '#ef4444', '#eab308', '#3b82f6', '#10b981'];
const strengthColor = computed(() => strengthColors[strengthScore.value] || 'transparent');

const strengthOk = computed(() => isStrongEnough(newPassword.value));
const matchOk = computed(() => !!confirmPassword.value && newPassword.value === confirmPassword.value);

const canSubmit = computed(
    () => !!currentPassword.value && strengthOk.value && matchOk.value && !loading.value && !loadingReset.value
);

// ── Logout forte (apos trocar senha) ───────────────────────
async function hardLogout() {
    try { await supabase.auth.signOut({ scope: 'global' }); }
    catch { /* ignore */ }
    try {
        const keys = [];
        for (let i = 0; i < localStorage.length; i++) {
            const k = localStorage.key(i);
            if (k?.startsWith('sb-') && k.includes('auth-token')) keys.push(k);
        }
        keys.forEach((k) => localStorage.removeItem(k));
    } catch { /* ignore */ }
    try { sessionStorage.removeItem('redirect_after_login'); }
    catch { /* ignore */ }
    window.location.replace('/auth/login');
}

function clearFields() {
    currentPassword.value = '';
    newPassword.value = '';
    confirmPassword.value = '';
}

// ── Trocar senha ───────────────────────────────────────────
async function changePassword() {
    loading.value = true;
    try {
        const { data: uData, error: uErr } = await supabase.auth.getUser();
        if (uErr) throw uErr;
        const email = uData?.user?.email;
        if (!email) throw new Error('Sessão inválida. Faça login novamente.');

        const { error: signError } = await supabase.auth.signInWithPassword({
            email,
            password: currentPassword.value
        });
        if (signError) throw new Error('Senha atual incorreta.');

        const { error: upError } = await supabase.auth.updateUser({ password: newPassword.value });
        if (upError) throw upError;

        clearFields();
        done.value = true;
        toast.add({
            severity: 'success',
            summary: 'Senha atualizada',
            detail: 'Por segurança, você será deslogado.',
            life: 2500
        });
        setTimeout(() => hardLogout(), 2600);
    } catch (e) {
        toast.add({
            severity: 'error',
            summary: 'Erro',
            detail: e?.message || 'Não foi possível trocar a senha.',
            life: 4000
        });
    } finally {
        loading.value = false;
    }
}

// ── Reset por e-mail ───────────────────────────────────────
async function sendResetEmail() {
    loadingReset.value = true;
    try {
        const { data: uData, error: uErr } = await supabase.auth.getUser();
        if (uErr) throw uErr;
        const email = uData?.user?.email;
        if (!email) throw new Error('Sessão inválida. Faça login novamente.');

        const redirectTo = `${window.location.origin}/auth/reset-password`;
        const { error } = await supabase.auth.resetPasswordForEmail(email, { redirectTo });
        if (error) throw error;

        toast.add({
            severity: 'info',
            summary: 'E-mail enviado',
            detail: 'Verifique sua caixa de entrada para redefinir a senha.',
            life: 5000
        });
    } catch (e) {
        toast.add({
            severity: 'error',
            summary: 'Erro',
            detail: e?.message || 'Falha ao enviar e-mail.',
            life: 4500
        });
    } finally {
        loadingReset.value = false;
    }
}

// ── Lifecycle ──────────────────────────────────────────────
onMounted(async () => {
    if (typeof window !== 'undefined' && window.matchMedia) {
        _mqMobile = window.matchMedia('(max-width: 767px)');
        isMobile.value = _mqMobile.matches;
        try { _mqMobile.addEventListener('change', _onMqMobileChange); }
        catch { _mqMobile.addListener(_onMqMobileChange); }
    }
    try {
        const { data } = await supabase.auth.getUser();
        userEmail.value = data?.user?.email || '';
    } catch { /* ignore */ }
});
</script>

<template>
    <Transition name="mse-drawer-fade">
        <div
            v-show="isMobile && drawerOpen"
            class="mse-mobile-drawer"
            :class="{ 'is-open': drawerOpen }"
        >
            <div id="mse-mobile-drawer-target" class="mse-mobile-drawer__scroll" />
        </div>
    </Transition>
    <Transition name="mse-drawer-fade">
        <div
            v-show="isMobile && drawerOpen"
            class="mse-mobile-drawer__backdrop"
            @click="fecharDrawer"
        />
    </Transition>

    <section class="mse-page">
        <header class="mse-page__head">
            <button
                class="mse-menu-btn mse-menu-btn--mobile-only"
                v-tooltip.bottom="'Estado & Boas práticas'"
                @click="toggleDrawer"
            >
                <i class="pi pi-bars" />
                <span>Menu</span>
            </button>
            <div class="mse-page__title">
                <i class="pi pi-shield mse-page__title-icon" />
                <span>Segurança</span>
            </div>
            <div class="mse-page__actions">
                <button class="mse-close" v-tooltip.bottom="'Voltar (Esc)'" @click="emit('close')">
                    <i class="pi pi-times" />
                </button>
            </div>
        </header>

        <div class="mse-subheader">
            <i class="pi pi-info-circle mse-subheader__icon" />
            <span class="mse-subheader__text">
                Gerencie a senha e o acesso da sua conta. Ao trocar a senha,
                você será deslogado de todos os dispositivos por segurança.
            </span>
        </div>

        <div class="mse-body">
            <Teleport to="#mse-mobile-drawer-target" :disabled="!isMobile">
                <aside class="mse-side">
                    <button class="mse-cfg-btn" :class="{ 'is-open': cfgOpen }" @click="toggleCfg">
                        <i :class="cfgOpen ? 'pi pi-arrow-left' : 'pi pi-cog'" />
                        <span>{{ cfgOpen ? 'Voltar' : 'Configurações' }}</span>
                        <i v-if="!cfgOpen" class="pi pi-chevron-down mse-cfg-btn__chev" />
                    </button>
                    <div v-if="cfgOpen" class="mse-side__scroll mse-side__scroll--cfg">
                        <MelissaConfigList @select="fecharCfg" />
                    </div>
                    <div v-else class="mse-side__scroll">
                        <!-- Card: Estado da conta -->
                        <div class="mse-w mse-w--side">
                            <div class="mse-w__head">
                                <div class="mse-w__icon"><i class="pi pi-id-card" /></div>
                                <div class="mse-w__title">
                                    <div class="mse-w__title-text">Estado da conta</div>
                                    <div class="mse-w__sub">Sessão e identificação</div>
                                </div>
                            </div>
                            <div class="mse-w__body">
                                <div class="mse-info">
                                    <div class="mse-info__row">
                                        <span class="mse-info__label">E-mail</span>
                                        <span class="mse-info__value mse-info__value--mono">{{ userEmail || '—' }}</span>
                                    </div>
                                    <div class="mse-info__row">
                                        <span class="mse-info__label">Sessão</span>
                                        <span class="mse-tag-active">
                                            <span class="mse-tag-active__dot" />
                                            Ativa
                                        </span>
                                    </div>
                                </div>
                                <div class="mse-account-warn">
                                    <i class="pi pi-exclamation-triangle" />
                                    <span>Trocar a senha desconecta todos os dispositivos.</span>
                                </div>
                            </div>
                        </div>

                        <!-- Card: Boas práticas -->
                        <div class="mse-w mse-w--side">
                            <div class="mse-w__head">
                                <div class="mse-w__icon"><i class="pi pi-lightbulb" /></div>
                                <div class="mse-w__title">
                                    <div class="mse-w__title-text">Boas práticas</div>
                                    <div class="mse-w__sub">Como criar uma senha segura</div>
                                </div>
                            </div>
                            <div class="mse-w__body">
                                <ul class="mse-tips">
                                    <li class="mse-tip">
                                        <span class="mse-tip__bullet" style="background: #6366f1" />
                                        <span>Use 8+ caracteres com maiúscula, minúscula e número.</span>
                                    </li>
                                    <li class="mse-tip">
                                        <span class="mse-tip__bullet" style="background: #10b981" />
                                        <span>Evite datas, nomes e sequências óbvias (1234, qwerty).</span>
                                    </li>
                                    <li class="mse-tip">
                                        <span class="mse-tip__bullet" style="background: #d946ef" />
                                        <span>Em computador compartilhado, encerre a sessão depois.</span>
                                    </li>
                                    <li class="mse-tip">
                                        <span class="mse-tip__bullet" style="background: #f59e0b" />
                                        <span>Não reutilize senhas de outros serviços.</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </aside>
            </Teleport>

            <div class="mse-main">
                <!-- Card: Trocar senha -->
                <div class="mse-w">
                    <div class="mse-w__head">
                        <div class="mse-w__icon"><i class="pi pi-key" /></div>
                        <div class="mse-w__title">
                            <div class="mse-w__title-text">Trocar senha</div>
                            <div class="mse-w__sub">Confirme a senha atual e defina uma nova</div>
                        </div>
                    </div>

                    <div class="mse-w__body">
                        <!-- Estado: concluído -->
                        <div v-if="done" class="mse-done">
                            <div class="mse-done__icon">
                                <i class="pi pi-check" />
                            </div>
                            <div class="mse-done__title">Senha atualizada!</div>
                            <div class="mse-done__hint">Redirecionando para o login…</div>
                        </div>

                        <!-- Estado: form -->
                        <template v-else>
                            <!-- Senha atual -->
                            <div class="mse-field">
                                <label for="mse_current" class="mse-field__label">Senha atual</label>
                                <Password
                                    id="mse_current"
                                    v-model="currentPassword"
                                    placeholder="Digite sua senha atual"
                                    toggleMask
                                    :feedback="false"
                                    class="w-full"
                                    inputClass="w-full"
                                    :disabled="loading || loadingReset"
                                />
                                <small class="mse-hint">Necessária para confirmar que é você.</small>
                            </div>

                            <!-- Nova senha -->
                            <div class="mse-field">
                                <label for="mse_new" class="mse-field__label">Nova senha</label>
                                <Password
                                    id="mse_new"
                                    v-model="newPassword"
                                    placeholder="Mínimo 8 caracteres"
                                    toggleMask
                                    :feedback="false"
                                    class="w-full"
                                    inputClass="w-full"
                                    :disabled="loading || loadingReset"
                                />

                                <div v-if="newPassword" class="mse-strength">
                                    <div class="mse-strength__bars">
                                        <div
                                            v-for="i in 4"
                                            :key="i"
                                            class="mse-strength__bar"
                                            :style="{
                                                background: i <= strengthScore ? strengthColor : 'var(--m-border)'
                                            }"
                                        />
                                    </div>
                                    <span class="mse-strength__label" :style="{ color: strengthColor }">
                                        {{ strengthLabel }}
                                    </span>
                                </div>
                                <small v-else class="mse-hint">
                                    Critérios: 8+ caracteres, maiúscula, minúscula e número.
                                </small>
                            </div>

                            <!-- Confirmar senha -->
                            <div class="mse-field">
                                <label for="mse_confirm" class="mse-field__label">Confirmar nova senha</label>
                                <Password
                                    id="mse_confirm"
                                    v-model="confirmPassword"
                                    placeholder="Repita a nova senha"
                                    toggleMask
                                    :feedback="false"
                                    class="w-full"
                                    inputClass="w-full"
                                    :disabled="loading || loadingReset"
                                />
                                <div
                                    v-if="confirmPassword"
                                    class="mse-match"
                                    :class="matchOk ? 'is-ok' : 'is-warn'"
                                >
                                    <i :class="matchOk ? 'pi pi-check' : 'pi pi-times'" />
                                    {{ matchOk ? 'As senhas conferem.' : 'As senhas não conferem.' }}
                                </div>
                            </div>

                            <!-- Aviso -->
                            <div class="mse-warn">
                                <i class="pi pi-info-circle" />
                                <span>
                                    Ao trocar sua senha, você será desconectado de todos os
                                    dispositivos por segurança.
                                </span>
                            </div>

                            <!-- Ações -->
                            <div class="mse-actions">
                                <button
                                    class="mse-btn"
                                    :disabled="loading || loadingReset"
                                    @click="sendResetEmail"
                                >
                                    <i :class="loadingReset ? 'pi pi-spin pi-spinner' : 'pi pi-envelope'" />
                                    <span>Enviar link por e-mail</span>
                                </button>
                                <button
                                    class="mse-btn mse-btn--primary"
                                    :disabled="!canSubmit"
                                    @click="changePassword"
                                >
                                    <i :class="loading ? 'pi pi-spin pi-spinner' : 'pi pi-check'" />
                                    <span>Trocar senha</span>
                                </button>
                            </div>
                        </template>
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>

<style scoped>
/* ═══════ Page chrome ═══════ */
.mse-page {
    position: absolute;
    inset: 6px 6px calc(var(--m-dock-h, 76px) + 6px) var(--m-config-aside-left, 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: mse-page-enter 240ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
@keyframes mse-page-enter {
    from { opacity: 0; transform: scale(0.985); }
    to   { opacity: 1; transform: scale(1); }
}

.mse-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;
}
.mse-page__title {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--m-text);
}
.mse-page__title-icon { color: var(--p-primary-color); font-size: 1.05rem; }
.mse-page__actions { display: flex; align-items: center; gap: 6px; }

.mse-close {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    background: transparent;
    border: 1px solid var(--m-border);
    color: var(--m-text-muted);
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
}
.mse-close:hover { background: var(--m-bg-soft-hover); color: var(--m-text); }
.mse-menu-btn {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 8px;
    border: 1px solid var(--m-border);
    background: var(--m-bg-soft);
    color: var(--m-text);
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    flex-shrink: 0;
}
.mse-menu-btn:hover { background: var(--m-bg-soft-hover); }

.mse-subheader {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 18px;
    background: var(--m-bg-soft);
    border-bottom: 1px solid var(--m-border);
    color: var(--m-text-muted);
    font-size: 0.78rem;
    flex-shrink: 0;
}
.mse-subheader__icon {
    color: var(--p-primary-color);
    font-size: 0.85rem;
    margin-top: 2px;
    flex-shrink: 0;
}

/* ═══════ Body 2-col ═══════ */
.mse-body {
    flex: 1;
    min-height: 0;
    display: flex;
    overflow: hidden;
}
.mse-side {
    width: 320px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--m-bg-soft);
    border-right: 1px solid var(--m-border);
    overflow: hidden;
}
.mse-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;
}
.mse-side__scroll::-webkit-scrollbar { width: 5px; }
.mse-side__scroll::-webkit-scrollbar-thumb {
    background: var(--m-border-strong);
    border-radius: 3px;
}

/* Botao "Configuracoes" no topo da .mse-side. Click alterna entre
   cards (default) e lista de configs (estado is-open: vira "Voltar"). */
.mse-cfg-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: calc(100% - 24px);
    margin: 12px 12px 0;
    padding: 10px 12px;
    background: var(--m-bg-medium);
    border: 1px solid var(--m-border);
    border-radius: 9px;
    color: var(--m-text);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: 600;
    text-align: left;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
    flex-shrink: 0;
}
.mse-cfg-btn:hover {
    background: var(--m-bg-soft-hover);
    border-color: var(--m-border-strong);
}
.mse-cfg-btn.is-open {
    background: color-mix(in srgb, var(--p-primary-color) 14%, transparent);
    border-color: color-mix(in srgb, var(--p-primary-color) 38%, transparent);
    color: var(--p-primary-color);
}
.mse-cfg-btn > i:first-child {
    color: var(--p-primary-color);
    font-size: 0.92rem;
}
.mse-cfg-btn > span { flex: 1; }
.mse-cfg-btn__chev {
    color: var(--m-text-muted);
    font-size: 0.7rem;
}
.mse-side__scroll--cfg {
    padding: 8px;
    gap: 0;
}

.mse-main {
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    scrollbar-width: thin;
    scrollbar-color: var(--m-border-strong) transparent;
}
.mse-main::-webkit-scrollbar { width: 5px; }
.mse-main::-webkit-scrollbar-thumb {
    background: var(--m-border-strong);
    border-radius: 3px;
}

/* ═══════ Card-base (estilo MelissaPerfil) ═══════ */
.mse-w {
    background: var(--m-bg-soft);
    border: 1px solid var(--m-border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
}
.mse-w--side {
    background: var(--m-bg-medium);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16);
}
.mse-w__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--m-border);
}
.mse-w__icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--p-primary-color) 15%, transparent);
    color: var(--p-primary-color);
}
.mse-w__icon > i { font-size: 0.95rem; }
.mse-w__title { flex: 1; min-width: 0; }
.mse-w__title-text {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--m-text);
    line-height: 1.2;
}
.mse-w__sub {
    font-size: 0.74rem;
    color: var(--m-text-muted);
    margin-top: 2px;
    line-height: 1.3;
}
.mse-w__body {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ═══════ Sidebar: Estado da conta ═══════ */
.mse-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mse-info__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.mse-info__label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--m-text-muted);
    flex-shrink: 0;
}
.mse-info__value {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--m-text);
    text-align: right;
    word-break: break-word;
}
.mse-info__value--mono {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.74rem;
    user-select: all;
}
.mse-tag-active {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.30);
    color: rgb(16, 185, 129);
    font-size: 0.72rem;
    font-weight: 700;
}
.mse-tag-active__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: mse-pulse 1.6s ease-in-out infinite;
}
@keyframes mse-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}
.mse-account-warn {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 9px;
    background: rgba(217, 119, 6, 0.10);
    border: 1px solid rgba(217, 119, 6, 0.30);
    color: rgb(217, 119, 6);
    font-size: 0.74rem;
    line-height: 1.4;
}
.mse-account-warn > i { font-size: 0.85rem; margin-top: 2px; flex-shrink: 0; }

/* ═══════ Sidebar: Boas praticas ═══════ */
.mse-tips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mse-tip {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.78rem;
    color: var(--m-text-muted);
    line-height: 1.4;
}
.mse-tip__bullet {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 6px;
    flex-shrink: 0;
}

/* ═══════ Main: Trocar senha ═══════ */
.mse-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mse-field__label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--m-text);
}
.mse-hint, .mse-err {
    display: block;
    font-size: 0.72rem;
    line-height: 1.3;
    color: var(--m-text-muted);
}

.mse-strength {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
}
.mse-strength__bars {
    display: flex;
    gap: 4px;
}
.mse-strength__bar {
    flex: 1;
    height: 4px;
    border-radius: 999px;
    transition: background-color 200ms ease;
}
.mse-strength__label {
    font-size: 0.72rem;
    font-weight: 700;
}

.mse-match {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-top: 2px;
}
.mse-match.is-ok { color: rgb(16, 185, 129); }
.mse-match.is-warn { color: rgb(217, 119, 6); }

.mse-warn {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 9px;
    background: var(--m-bg-medium);
    border: 1px solid var(--m-border);
    color: var(--m-text-muted);
    font-size: 0.78rem;
    line-height: 1.4;
}
.mse-warn > i { font-size: 0.92rem; margin-top: 2px; flex-shrink: 0; color: var(--p-primary-color); }

.mse-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.mse-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid var(--m-border);
    background: var(--m-bg-medium);
    color: var(--m-text);
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: inherit;
    transition: background-color 120ms ease, opacity 120ms ease;
}
.mse-btn:hover { background: var(--m-bg-soft-hover); }
.mse-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.mse-btn--primary {
    background: var(--p-primary-color);
    border-color: var(--p-primary-color);
    color: var(--p-primary-contrast-color, #fff);
    margin-left: auto;
}
.mse-btn--primary:hover {
    background: color-mix(in srgb, var(--p-primary-color) 88%, black);
}

.mse-done {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 32px 12px;
}
.mse-done__icon {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.30);
    color: rgb(16, 185, 129);
    font-size: 2rem;
}
.mse-done__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--m-text);
}
.mse-done__hint {
    font-size: 0.82rem;
    color: var(--m-text-muted);
}

/* ═══════ Mobile drawer ═══════ */
.mse-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;
}
.mse-mobile-drawer.is-open { transform: translateX(0); }
.mse-mobile-drawer__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;
}
.mse-mobile-drawer__scroll::-webkit-scrollbar { width: 5px; }
.mse-mobile-drawer__scroll::-webkit-scrollbar-thumb {
    background: var(--m-border-strong);
    border-radius: 3px;
}
/* No mobile a .mse-side e teleportada pra dentro do drawer scroll. */
.mse-mobile-drawer__scroll .mse-side {
    width: 100%;
    border-right: none;
}

.mse-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;
}
.mse-drawer-fade-enter-active,
.mse-drawer-fade-leave-active { transition: opacity 200ms ease; }
.mse-drawer-fade-enter-from,
.mse-drawer-fade-leave-to { opacity: 0; }

/* ═══════ Desktop (>=768px) — breakpoint menor que as outras Melissa
   pages (1024px) porque essa pagina e enxuta (so 1 form pequeno) e
   cabe bem em tablet portrait. ═══════ */
@media (min-width: 768px) {
    /* Largura adaptativa, alinhada a esquerda:
       - 768px–1012px : full-width (right: 6px) — viewports tablet/laptop
                        pequeno onde 1000px nao caberia
       - 1012px–2012px: width = 1000px fixo (right cresce com viewport)
       - >= 2012px    : width = ~50% do viewport (right: 50%)
       Formula: max(6px, min(50%, calc(100% - 1006px))) */
    .mse-page {
        right: max(6px, min(50%, calc(100% - 1006px)));
    }

    /* Sidebar: cards min-h 300 + max-h 100% + body scroll */
    .mse-side > .mse-side__scroll > .mse-w--side {
        min-height: 300px;
        max-height: 100%;
        display: flex;
        flex-direction: column;
    }
    /* Main: card "Trocar senha" sem min-height (altura por conteudo)
       mas cap-ado em max-height: 100% do main pra nao passar do viewport;
       body com overflow-y: auto pra scroll interno se conteudo for longo. */
    .mse-main > .mse-w {
        max-height: 100%;
        display: flex;
        flex-direction: column;
    }
    .mse-side .mse-w--side > .mse-w__body,
    .mse-main > .mse-w > .mse-w__body {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-width: thin;
        scrollbar-color: var(--m-border-strong) transparent;
    }
    .mse-side .mse-w--side > .mse-w__body::-webkit-scrollbar,
    .mse-main > .mse-w > .mse-w__body::-webkit-scrollbar { width: 5px; }
    .mse-side .mse-w--side > .mse-w__body::-webkit-scrollbar-thumb,
    .mse-main > .mse-w > .mse-w__body::-webkit-scrollbar-thumb {
        background: var(--m-border-strong);
        border-radius: 3px;
    }
}

/* ═══════ Mobile (<768px) ═══════ */
@media (max-width: 767px) {
    .mse-body { flex-direction: column; padding: 0; }
    .mse-body > .mse-side { display: none; }
    .mse-main { width: 100%; padding: 8px; }
    .mse-main .mse-w {
        height: auto;
        flex: 0 0 auto;
        align-self: stretch;
    }
    .mse-page__title > span:first-of-type { display: none; }
    .mse-page__title-icon { display: none; }
    .mse-menu-btn--mobile-only { display: inline-flex; }
    .mse-actions { flex-direction: column; }
    .mse-btn--primary { margin-left: 0; }
}
</style>
