Melissa: paginas nativas cfg-* + temas + textos com fundo + drawer WA

CHROME COMPARTILHADO + 18 PAGINAS NATIVAS
- MelissaConfigPage: chrome unico (header, drawer mobile, sidebar com Configuracoes
  + FAQ slot, main com Suspense). Replica fake-dialog right rule e fica flush
  com o config-aside global.
- 18 wrappers finos (~25 linhas cada): cfg-precificacao, cfg-descontos,
  cfg-excecoes, cfg-convenios, cfg-wa, cfg-wa-pessoal, cfg-wa-oficial,
  cfg-wa-templates, cfg-conversas-tags/autoreply/optouts/sla/bots,
  cfg-lembretes, cfg-creditos-wa, cfg-sms, cfg-email-templates,
  cfg-recursos-extras, cfg-recursos-extras-extrato, cfg-auditoria.
- Cada wrapper usa defineAsyncComponent + Suspense pra evitar race com
  tenantStore no boot (loading travado em alguns chooser-style pages).
- MelissaLayout: imports + SECOES + MELISSA_NON_CONFIG_SLUGS + render
  conditions atualizados pra cobrir os 18 slugs.

PAGINAS LEGADAS DETECTAM CONTEXTO MELISSA
- ConfiguracoesWhatsappChooserPage, WhatsappPage, TwilioWhatsappPage,
  SmsPage, RecursosExtrasPage, EmailTemplatesPage, AddonsExtratoPage,
  AgendadorPage, ConversasAutoreplyPage: route.startsWith('/melissa')
  decide se router.push vai pro slug Melissa ou /configuracoes legado.
- Anchors <a href="/configuracoes/..."> (que recarregavam pagina e
  vazavam o usuario do Melissa) trocados por RouterLink context-aware.
- MelissaAgenda.goSettings agora vai pra /melissa/agenda-config.

PERSONALIZAR > TEMAS
- melissaThemes.js: catalogo Freud/Klein/Jung (wallpaper + cor primaria
  + preset Lara/Nora + surface).
- Toggle de tema aplica tudo de uma vez; persistido em melissa_prefs.themeName.
- Boot resolve themeName -> imagem via fetch + data URL (sem guardar
  data URL gigante no DB).
- onCustomFileChange/onClearBg invalidam themeName quando user mexe no bg.

PERSONALIZAR > FUNDO NOS TEXTOS
- Pref textBgEnabled em melissa_prefs.
- MelissaHeroClock: prop textBg envolve relogio/data/saudacao/resumo
  em <span class="hero-text"> que ganha bg branco/preto 60% + borda
  + padding + radius quando o toggle esta on.
- Vars --m-hero-text-bg / --m-hero-text-border flipam com light/dark.

TOP + DOCK COM GRADIENT HORIZONTAL
- Var --m-band: preto 80% (dark) / branco 80% (light).
- .melissa-topbar-band: gradiente cor->transparente (right->left) atras
  dos botoes do topo.
- .melissa-dock: gradiente cor->transparente (left->right) atras dos pins.

MELISSANEGOCIO ABSORVE MINHA EMPRESA
- Adiciona logo upload + preview "cartao de visita" (computeds
  enderecoLinhas/redesValidas/temDados/logoDisplay + redeIcon helper).
- Normaliza dados legados do cfg-empresa: redes_sociais.{rede} virou {name}.
- Preview teleporta entre 3 destinos baseado no viewport:
  mobile -> drawer; mid-desktop -> sidebar; wide-desktop (>=1340px) ->
  painel flutuante FORA do fake dialog (ancora no right edge + 14px gap,
  altura segue conteudo, header alinhado com header do dialog).
- Remove cfg-empresa de melissaConfigGrupos.js + COMPONENT_MAP do
  MelissaConfiguracoes; grupo "Empresa & Plataforma" -> "Plataforma".

CRONOMETRO -> SESSAO AGENDADA
- MelissaCronometro emite session-end ao parar com paciente selecionado
  (threshold 5s pra ignorar start/stop acidental).
- MelissaLayout.onCronometroSessionEnd busca agenda_eventos do paciente
  no dia (tipo='sessao'), pega o mais recente e grava em
  extra_fields.cronometro_duracao_seg + cronometro_parado_em.
- Toast: sucesso ("X min salvos") ou warn ("sessao nao encontrada").

CONVERSATIONDRAWER WHATSAPP-LIKE
- Nova imagem whatsapp-bg.jpg (renomeada de hash random) usada como
  tile (380px) no .cd-msgs.
- Light: bege #efeae2 + multiply blend.
- Dark: #0b141a + camada 78% sobre o doodle.
- Bubbles WA-style (verde out / branco-dark in com tails) ja existiam.

EXTRATO RECURSOS EXTRAS
- Filtros 2-por-linha em Melissa (vs 1/4 no /configuracoes).
- Cards de Resumo teleportam pro #cfg-page-side em Melissa
  (1-col empilhado no drawer; 4-col inline no /configuracoes).
- Botoes de exportar com flex-1 distribuidos em uma unica linha em
  desktop, wrap no mobile.
- DataTable scrollable em ambos os layouts.

OUTROS AJUSTES MENORES
- Cfg-conversas-autoreply: dias semana 4-cols em Melissa (vs 7-cols
  no /configuracoes).
- Cfg-creditos-wa: 1/2 por linha (vs 1/2/4) em Melissa.
- Cfg-recursos-extras: pacotes 1/2 (vs 1/2/4); "Em breve" 1-col.
- WhatsAppPage aba Templates: guia de formatacao teleporta pro side
  drawer em Melissa, deixando textareas full-width.
- ConfigPage chrome agora tem #cfg-page-actions target pros Teleport
  de acoes (refresh button etc).
- Imagens renomeadas em src/assets/themes/ (freudwebp/melainewebp/
  jungwebp.webp) e src/assets/whatsapp-bg.jpg.
- JoditTextEditor.vue novo (wrapper Jodit generico, sem features de email).
- MelissaConfigList.vue novo (lista compartilhada de configs pro drawer).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/layout/melissa/MelissaPerfil.vue

@@ -21,7 +21,7 @@ import { useConfirm } from 'primevue/useconfirm';
 import { useRouter } from 'vue-router';
 import { supabase } from '@/lib/supabase/client';
 import { useTenantStore } from '@/stores/tenantStore';
-import MelissaConfigSidebar from './MelissaConfigSidebar.vue';
+import MelissaConfigList from './MelissaConfigList.vue';
 // InputText/Select/Textarea/InputMask/Skeleton/Tag/Button: auto via PrimeVueResolver
 
 const emit = defineEmits(['close']);
@@ -44,6 +44,12 @@ function _onMqMobileChange(e) {
 function toggleDrawer() { drawerOpen.value = !drawerOpen.value; }
 function fecharDrawer() { drawerOpen.value = false; }
 
+// Toggle entre cards contextuais (default) e lista de configs (alterna
+// inline na .mpr-side via v-if — sem overlay/popover, zero overhead).
+const cfgOpen = ref(false);
+function toggleCfg() { cfgOpen.value = !cfgOpen.value; }
+function fecharCfg() { cfgOpen.value = false; }
+
 // ── Estado ─────────────────────────────────────────────────
 const loading = ref(true);
 const saving = ref(false);
@@ -465,21 +471,17 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-    <!-- Drawer mobile: menu global de configs no topo + sidebar
-         contextual da pagina (Sua evolucao + Avatar) abaixo via
-         Teleport target. -->
+    <!-- Drawer mobile: hospeda a sidebar contextual da pagina (Sua
+         evolucao + Avatar + Sair) via Teleport target. A navegacao
+         entre configs vive no botao "Configuracoes" no topo da
+         .mpr-side, que abre o MelissaConfigPopover. -->
     <Transition name="mpr-drawer-fade">
         <div
             v-show="isMobile && drawerOpen"
             class="mpr-mobile-drawer"
             :class="{ 'is-open': drawerOpen }"
         >
-            <div class="mpr-mobile-drawer__scroll">
-                <div class="mpr-mobile-drawer__configs">
-                    <MelissaConfigSidebar />
-                </div>
-                <div id="mpr-mobile-drawer-target" class="mpr-mobile-drawer__contextual" />
-            </div>
+            <div id="mpr-mobile-drawer-target" class="mpr-mobile-drawer__scroll" />
         </div>
     </Transition>
     <Transition name="mpr-drawer-fade">
@@ -535,7 +537,25 @@ onBeforeUnmount(() => {
                  drawer "Menu Perfil" (abaixo do menu de configs). ═══ -->
             <Teleport to="#mpr-mobile-drawer-target" :disabled="!isMobile">
                 <aside class="mpr-side">
-                    <div class="mpr-side__scroll">
+                    <!-- Botao alterna entre cards (default) e lista
+                         de configs. Click vira "Voltar" quando aberto. -->
+                    <button
+                        class="mpr-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 mpr-cfg-btn__chev" />
+                    </button>
+
+                    <!-- Estado: lista de configs -->
+                    <div v-if="cfgOpen" class="mpr-side__scroll mpr-side__scroll--cfg">
+                        <MelissaConfigList @select="fecharCfg" />
+                    </div>
+
+                    <!-- Estado: cards contextuais (default) -->
+                    <div v-else class="mpr-side__scroll">
                         <!-- Card: Sua evolução -->
                         <div class="mpr-w mpr-w--side">
                             <div class="mpr-w__head">
@@ -667,7 +687,7 @@ onBeforeUnmount(() => {
                         </div>
                     </div>
 
-                    <div class="mpr-side__footer">
+                    <div v-if="!cfgOpen" class="mpr-side__footer">
                         <button class="mpr-btn mpr-btn--danger mpr-btn--full" @click="confirmSignOut">
                             <i class="pi pi-sign-out" />
                             <span>Sair da conta</span>
@@ -923,7 +943,7 @@ onBeforeUnmount(() => {
 /* ═══════ Page chrome ═══════ */
 .mpr-page {
     position: absolute;
-    inset: 6px 6px calc(var(--m-dock-h, 76px) + 6px) var(--m-config-aside-left, 6px);
+    inset: 6px 6px calc(var(--m-dock-h, 76px) + 6px) 6px;
     z-index: 40;
     display: flex;
     flex-direction: column;
@@ -1070,6 +1090,55 @@ onBeforeUnmount(() => {
     overflow: hidden;
 }
 
+/* Botao "Configuracoes" no topo da .mpr-side. Click alterna entre
+   cards (default) e lista de configs (estado is-open: vira "Voltar"). */
+.mpr-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;
+}
+.mpr-cfg-btn:hover {
+    background: var(--m-bg-soft-hover);
+    border-color: var(--m-border-strong);
+}
+.mpr-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);
+}
+.mpr-cfg-btn > i:first-child {
+    color: var(--p-primary-color);
+    font-size: 0.92rem;
+}
+.mpr-cfg-btn > span {
+    flex: 1;
+}
+.mpr-cfg-btn__chev {
+    color: var(--m-text-muted);
+    font-size: 0.7rem;
+}
+
+/* Variante do scroll quando renderiza a lista de configs em vez
+   dos cards — sem gap entre items (a propria lista controla). */
+.mpr-side__scroll--cfg {
+    padding: 8px;
+    gap: 0;
+}
+
 /* COL 1: sidebar */
 .mpr-side {
     width: 320px;
@@ -1131,46 +1200,31 @@ onBeforeUnmount(() => {
    interno engata. Mesma logica nos cards da sidebar (Sua evolucao,
    Avatar) que cresciam quando muitas badges/dicas apareciam. */
 @media (min-width: 1024px) {
-    .mpr-main {
-        display: grid;
-        grid-template-columns: repeat(2, 1fr);
-        gap: 12px;
-        align-items: start;
-        align-content: start;
+    /* Fake dialog: largura adaptativa, alinhada a esquerda (apos o
+       config-aside global). Espelha pattern de Seguranca/Pagamento/etc:
+       - 1024–1012px : full-width (right: 6px) — overlap minimo
+       - 1012–2012px : width = 1000px fixo (right cresce com viewport)
+       - >= 2012px   : width = ~50% do viewport (right: 50%) */
+    .mpr-page {
+        right: max(6px, min(50%, calc(100% - 1006px)));
     }
+
+    /* Cards do main empilhados em 1-col (era grid 2-col antes).
+       .mpr-main herda flex-direction: column do base — cards crescem
+       com conteudo, sem scroll interno. Cada card ocupa width total
+       do dialog (max ~1000px). */
     .mpr-main > .mpr-w {
-        min-height: 300px;
-        max-height: 100%;
-        display: flex;
-        flex-direction: column;
+        flex-shrink: 0;
+        height: auto;
     }
+    /* Cards da sidebar (Sua evolucao + Avatar): altura natural,
+       flex-shrink: 0 evita compressao quando total passa do
+       .mpr-side__scroll (scroll externo). */
     .mpr-side > .mpr-side__scroll > .mpr-w--side {
-        min-height: 300px;
-        max-height: 100%;
         display: flex;
         flex-direction: column;
-    }
-    .mpr-main > .mpr-w > .mpr-w__body,
-    .mpr-side .mpr-w--side > .mpr-w__body {
-        flex: 1;
-        min-height: 0;
-        overflow-y: auto;
-        overflow-x: hidden;
-        scrollbar-width: thin;
-        scrollbar-color: var(--m-border-strong) transparent;
-    }
-    .mpr-main > .mpr-w > .mpr-w__body::-webkit-scrollbar,
-    .mpr-side .mpr-w--side > .mpr-w__body::-webkit-scrollbar { width: 5px; }
-    .mpr-main > .mpr-w > .mpr-w__body::-webkit-scrollbar-thumb,
-    .mpr-side .mpr-w--side > .mpr-w__body::-webkit-scrollbar-thumb {
-        background: var(--m-border-strong);
-        border-radius: 3px;
-    }
-    .mpr-main .mpr-grid {
-        grid-template-columns: 1fr;
-    }
-    .mpr-main .mpr-field--half {
-        grid-column: 1 / -1;
+        flex-shrink: 0;
+        height: auto;
     }
 }
 
@@ -1528,6 +1582,28 @@ onBeforeUnmount(() => {
 }
 .mpr-mobile-drawer.is-open { transform: translateX(0); }
 .mpr-mobile-drawer__scroll {
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+}
+/* Aside teleportada pro drawer — perde adornos proprios */
+.mpr-mobile-drawer__scroll .mpr-side {
+    flex: 1;
+    min-height: 0;
+    width: 100%;
+    overflow: hidden;
+    background: transparent;
+    border-right: none;
+    display: flex;
+    flex-direction: column;
+}
+.mpr-mobile-drawer__scroll .mpr-cfg-btn {
+    margin: 12px 12px 0;
+    flex-shrink: 0;
+}
+.mpr-mobile-drawer__scroll .mpr-side__scroll {
     flex: 1;
     min-height: 0;
     overflow-y: auto;
@@ -1539,47 +1615,21 @@ onBeforeUnmount(() => {
     scrollbar-width: thin;
     scrollbar-color: var(--m-border-strong) transparent;
 }
-.mpr-mobile-drawer__scroll::-webkit-scrollbar { width: 5px; }
-.mpr-mobile-drawer__scroll::-webkit-scrollbar-thumb {
+.mpr-mobile-drawer__scroll .mpr-side__scroll::-webkit-scrollbar { width: 5px; }
+.mpr-mobile-drawer__scroll .mpr-side__scroll::-webkit-scrollbar-thumb {
     background: var(--m-border-strong);
     border-radius: 3px;
 }
-.mpr-mobile-drawer__configs {
+.mpr-mobile-drawer__scroll .mpr-w--side {
+    margin: 0;
     flex-shrink: 0;
 }
-.mpr-mobile-drawer__configs :deep(.mcs-aside) {
-    height: auto;
-    border-radius: 12px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
-}
-.mpr-mobile-drawer__configs :deep(.mcs-aside__body) {
-    max-height: none;
-    overflow: visible;
-}
-.mpr-mobile-drawer__contextual {
-    flex-shrink: 0;
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-}
-.mpr-mobile-drawer__contextual .mpr-side {
-    width: 100%;
-    background: transparent;
-    border-right: none;
-    flex-shrink: 0;
-}
-.mpr-mobile-drawer__contextual .mpr-side__scroll {
-    padding: 0;
-    gap: 12px;
-    overflow: visible;
-}
-.mpr-mobile-drawer__contextual .mpr-side__footer {
-    padding: 0;
-    background: transparent;
-    border-top: none;
-}
-.mpr-mobile-drawer__contextual .mpr-w--side {
+.mpr-mobile-drawer__scroll .mpr-side__footer {
     flex-shrink: 0;
+    margin: 0;
+    padding: 12px;
+    background: var(--m-bg-medium);
+    border-top: 1px solid var(--m-border);
 }
 
 .mpr-mobile-drawer__backdrop {
@@ -1601,10 +1651,9 @@ onBeforeUnmount(() => {
         flex-direction: column;
         padding: 0;
     }
-    /* Sidebar contextual sai do flow (vai pro drawer via Teleport) */
-    .mpr-side {
-        display: none;
-    }
+    /* .mpr-side foi Teleportada pro drawer — nao precisa de display: none
+       (Teleport ja a removeu do .mpr-body). Aplicar display: none aqui
+       escondia o elemento teleportado dentro do drawer. */
     .mpr-main {
         width: 100%;
         padding: 8px;