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/MelissaBloqueios.vue

@@ -15,6 +15,7 @@
  * tabela agenda_bloqueios).
  */
 import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
+import MelissaConfigList from './MelissaConfigList.vue';
 import { useToast } from 'primevue/usetoast';
 import { useConfirm } from 'primevue/useconfirm';
 import { supabase } from '@/lib/supabase/client';
@@ -49,6 +50,11 @@ function _onMqMobileChange(e) {
 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 loadingB = ref(true);
 const saving = ref(false);
@@ -412,7 +418,15 @@ onBeforeUnmount(() => {
         <div class="mbq-body">
             <Teleport to="#mbq-mobile-drawer-target" :disabled="!isMobile">
                 <aside class="mbq-side">
-                    <div class="mbq-side__scroll">
+                    <button class="mbq-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 mbq-cfg-btn__chev" />
+                    </button>
+                    <div v-if="cfgOpen" class="mbq-side__scroll mbq-side__scroll--cfg">
+                        <MelissaConfigList @select="fecharCfg" />
+                    </div>
+                    <div v-else class="mbq-side__scroll">
                         <!-- Card: Resumo -->
                         <div class="mbq-w mbq-w--side">
                             <div class="mbq-w__head">
@@ -984,6 +998,50 @@ onBeforeUnmount(() => {
     border-radius: 3px;
 }
 
+/* Botao "Configuracoes" no topo da .mbq-side. Click alterna entre
+   cards (default) e lista de configs (estado is-open: vira "Voltar"). */
+.mbq-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;
+}
+.mbq-cfg-btn:hover {
+    background: var(--m-bg-soft-hover);
+    border-color: var(--m-border-strong);
+}
+.mbq-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);
+}
+.mbq-cfg-btn > i:first-child {
+    color: var(--p-primary-color);
+    font-size: 0.92rem;
+}
+.mbq-cfg-btn > span { flex: 1; }
+.mbq-cfg-btn__chev {
+    color: var(--m-text-muted);
+    font-size: 0.7rem;
+}
+.mbq-side__scroll--cfg {
+    padding: 8px;
+    gap: 0;
+}
+
 .mbq-main {
     flex: 1;
     min-width: 0;
@@ -1397,23 +1455,6 @@ onBeforeUnmount(() => {
 }
 .mbq-mobile-drawer.is-open { transform: translateX(0); }
 .mbq-mobile-drawer__scroll {
-    flex: 1;
-    min-height: 0;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-}
-.mbq-mobile-drawer__scroll .mbq-side {
-    flex: 1;
-    min-height: 0;
-    width: 100%;
-    overflow: hidden;
-    background: transparent;
-    border-right: none;
-    display: flex;
-    flex-direction: column;
-}
-.mbq-mobile-drawer__scroll .mbq-side__scroll {
     flex: 1;
     min-height: 0;
     overflow-y: auto;
@@ -1425,14 +1466,15 @@ onBeforeUnmount(() => {
     scrollbar-width: thin;
     scrollbar-color: var(--m-border-strong) transparent;
 }
-.mbq-mobile-drawer__scroll .mbq-side__scroll::-webkit-scrollbar { width: 5px; }
-.mbq-mobile-drawer__scroll .mbq-side__scroll::-webkit-scrollbar-thumb {
+.mbq-mobile-drawer__scroll::-webkit-scrollbar { width: 5px; }
+.mbq-mobile-drawer__scroll::-webkit-scrollbar-thumb {
     background: var(--m-border-strong);
     border-radius: 3px;
 }
-.mbq-mobile-drawer__scroll .mbq-w--side {
-    margin: 0;
-    flex-shrink: 0;
+/* No mobile a .mbq-side e teleportada pra dentro do drawer scroll. */
+.mbq-mobile-drawer__scroll .mbq-side {
+    width: 100%;
+    border-right: none;
 }
 
 .mbq-mobile-drawer__backdrop {
@@ -1451,7 +1493,7 @@ onBeforeUnmount(() => {
 /* ═══════ Mobile (<1024px) ═══════ */
 @media (max-width: 1023px) {
     .mbq-body { flex-direction: column; padding: 0; }
-    .mbq-side { display: none; }
+    .mbq-body > .mbq-side { display: none; }
     .mbq-main { width: 100%; padding: 8px; }
     .mbq-main .mbq-w {
         height: auto;