FEAT: Adição de info de erro

- Ajustado border Radius de todos componentes de 28 para 20px
- Criado modal para quando for criado um novo template

.gitea/workflows/deploy-dev.yml

@@ -1,24 +1,71 @@
-name: Deploy Dev
+name: Deploy Dev — Frontend
 
 on:
   push:
     branches:
       - dev
+  workflow_dispatch:
 
 jobs:
   deploy:
-    runs-on: self-hosted
+    name: Deploy para VM Dev
+    runs-on: omnichannel-uat
+    env:
+      DEPLOY_PATH: /opt/omnichannel
+
     steps:
-      - name: Atualizar código na VM Dev
+      - name: Checkout
-        run: |
+        uses: actions/checkout@v4
-          cd /opt/omnichannel/frontend
-          git pull origin dev
 
-      - name: Copiar env
+      - name: Preflight
+        shell: bash
         run: |
-          cp /home/desenvolvimento/.envs/omnichannel/frontend.env.development /opt/omnichannel/frontend/.env.development
+          set -euo pipefail
+          echo "Runner: $(hostname)"
+          docker --version
+          docker compose version
 
-      - name: Rebuild container
+      - name: Verificar secrets obrigatórios
+        shell: bash
+        env:
+          ENV_DEV: ${{ secrets.ENV_DEV }}
         run: |
-          cd /opt/omnichannel
+          set -euo pipefail
-          docker compose up -d --build frontend
+          if [ -z "${ENV_DEV:-}" ]; then
+            echo "Secret ENV_DEV não configurado. Adicione o conteúdo completo do .env.development em Settings > Actions > Secrets."
+            exit 1
+          fi
+
+      - name: Escrever .env.development
+        shell: bash
+        env:
+          ENV_DEV: ${{ secrets.ENV_DEV }}
+        run: |
+          set -euo pipefail
+          printf '%s\n' "$ENV_DEV" > "$DEPLOY_PATH/frontend/.env.development"
+          chmod 600 "$DEPLOY_PATH/frontend/.env.development"
+
+      - name: Sync código
+        shell: bash
+        run: |
+          set -euo pipefail
+          LOCK="/tmp/omnichannel-frontend-dev.lock"
+          (
+            flock -n 9 || { echo "Deploy já em andamento. Tente novamente em instantes."; exit 1; }
+
+            rsync -az --delete \
+              --exclude='.git/' \
+              --exclude='.gitea/' \
+              --exclude='.env*' \
+              --exclude='node_modules/' \
+              --exclude='dist/' \
+              ./ "$DEPLOY_PATH/frontend/"
+          ) 9>"$LOCK"
+
+      - name: Build e reiniciar container
+        shell: bash
+        run: |
+          set -euo pipefail
+          cd "$DEPLOY_PATH"
+          docker compose build frontend
+          docker compose up -d frontend

.gitea/workflows/deploy-prod.yml

@@ -0,0 +1,71 @@
+name: Deploy Prod — Frontend
+
+on:
+  push:
+    branches:
+      - master
+  workflow_dispatch:
+
+jobs:
+  deploy:
+    name: Deploy para VM Prod
+    runs-on: self-hosted-prod
+    env:
+      DEPLOY_PATH: /opt/omnichannel
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Preflight
+        shell: bash
+        run: |
+          set -euo pipefail
+          echo "Runner: $(hostname)"
+          docker --version
+          docker compose version
+
+      - name: Verificar secrets obrigatórios
+        shell: bash
+        env:
+          ENV_PROD: ${{ secrets.ENV_PROD }}
+        run: |
+          set -euo pipefail
+          if [ -z "${ENV_PROD:-}" ]; then
+            echo "Secret ENV_PROD não configurado."
+            exit 1
+          fi
+
+      - name: Escrever .env.production
+        shell: bash
+        env:
+          ENV_PROD: ${{ secrets.ENV_PROD }}
+        run: |
+          set -euo pipefail
+          printf '%s\n' "$ENV_PROD" > "$DEPLOY_PATH/frontend/.env.production"
+          chmod 600 "$DEPLOY_PATH/frontend/.env.production"
+
+      - name: Sync código
+        shell: bash
+        run: |
+          set -euo pipefail
+          LOCK="/tmp/omnichannel-frontend-prod.lock"
+          (
+            flock -n 9 || { echo "Deploy já em andamento. Tente novamente em instantes."; exit 1; }
+
+            rsync -az --delete \
+              --exclude='.git/' \
+              --exclude='.gitea/' \
+              --exclude='.env*' \
+              --exclude='node_modules/' \
+              --exclude='dist/' \
+              ./ "$DEPLOY_PATH/frontend/"
+          ) 9>"$LOCK"
+
+      - name: Build e reiniciar container
+        shell: bash
+        run: |
+          set -euo pipefail
+          cd "$DEPLOY_PATH"
+          docker compose build frontend
+          docker compose up -d frontend

src/modules/attendance/components/RecentContactsList.jsx

@@ -8,7 +8,7 @@ export function RecentContactsList({
       style={{
         background: '#fff',
         border: '1px solid var(--color-border)',
-        borderRadius: '28px',
+        borderRadius: '20px',
         padding: '1.25rem',
         display: 'grid',
         gap: '0.9rem',
@@ -34,7 +34,7 @@ export function RecentContactsList({
                 border: '1px solid',
                 borderColor: isActive ? 'rgba(0, 164, 183, 0.26)' : 'var(--color-border)',
                 background: isActive ? 'rgba(0, 164, 183, 0.08)' : '#fff',
-                borderRadius: '20px',
+                borderRadius: '15px',
                 padding: '1rem',
                 textAlign: 'left',
                 display: 'grid',
@@ -71,7 +71,7 @@ export function RecentContactsList({
           <div
             style={{
               border: '1px solid var(--color-border)',
-              borderRadius: '18px',
+              borderRadius: '14px',
               padding: '1rem',
               background: 'rgba(0, 49, 80, 0.04)',
               color: 'var(--color-text-soft)',

src/modules/attendance/pages/AgentNewAttendancePage.jsx

@@ -40,7 +40,7 @@ export function AgentNewAttendancePage() {
           width: 'min(1680px, calc(100vw - 3rem))',
           margin: '0 auto',
           background: 'var(--color-surface-strong)',
-          borderRadius: '32px',
+          borderRadius: '24px',
           boxShadow: 'var(--shadow-lg)',
           padding: '1.5rem',
           display: 'grid',
@@ -60,7 +60,7 @@ export function AgentNewAttendancePage() {
               style={{
                 background: '#fff',
                 border: '1px solid var(--color-border)',
-                borderRadius: '28px',
+                borderRadius: '20px',
                 padding: '1.5rem',
               }}
             >
@@ -81,7 +81,7 @@ export function AgentNewAttendancePage() {
               <div
                 style={{
                   padding: '1.1rem 1.25rem',
-                  borderRadius: '22px',
+                  borderRadius: '16px',
                   background: '#fff',
                   border: '1px solid var(--color-border)',
                 }}
@@ -100,7 +100,7 @@ export function AgentNewAttendancePage() {
                   justifySelf: isMobile ? 'stretch' : 'end',
                   justifyContent: isMobile ? 'space-between' : 'flex-end',
                   padding: '0.85rem 1rem',
-                  borderRadius: '22px',
+                  borderRadius: '16px',
                   background: '#fff',
                   border: '1px solid var(--color-border)',
                 }}
@@ -116,7 +116,7 @@ export function AgentNewAttendancePage() {
                   style={{
                     width: 48,
                     height: 48,
-                    borderRadius: '16px',
+                    borderRadius: '12px',
                     display: 'grid',
                     placeItems: 'center',
                     background: 'linear-gradient(135deg, var(--color-accent), var(--color-primary))',

src/modules/attendance/pages/NewAttendancePage.jsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import { BrandMark } from '../../../shared/components/BrandMark';
 import { useViewport } from '../../../shared/hooks/useViewport';
@@ -369,7 +369,7 @@ export function NewAttendancePage({ embedded = false }) {
             style={{
               justifySelf: isMobile ? 'stretch' : 'center',
               padding: '0.85rem 1rem',
-              borderRadius: '18px',
+              borderRadius: '14px',
               background: 'rgba(0, 49, 80, 0.06)',
               color: 'var(--color-primary)',
               fontWeight: 700,
@@ -382,7 +382,7 @@ export function NewAttendancePage({ embedded = false }) {
             to="/home"
             style={{
               justifySelf: isMobile ? 'stretch' : 'end',
-              borderRadius: '16px',
+              borderRadius: '12px',
               padding: '0.85rem 1rem',
               background: 'var(--color-primary)',
               color: '#fff',
@@ -407,7 +407,7 @@ export function NewAttendancePage({ embedded = false }) {
             style={{
               background: '#fff',
               border: '1px solid var(--color-border)',
-              borderRadius: '28px',
+              borderRadius: '20px',
               padding: '1.5rem',
               display: 'grid',
               gap: '1.25rem',
@@ -443,7 +443,7 @@ export function NewAttendancePage({ embedded = false }) {
                     style={{
                       border: '1px solid',
                       borderColor: isActive ? `${channel.accent}44` : 'var(--color-border)',
-                      borderRadius: '22px',
+                      borderRadius: '16px',
                       padding: '1rem',
                       background: isActive ? `${channel.accent}12` : '#fff',
                       textAlign: 'left',
@@ -485,7 +485,7 @@ export function NewAttendancePage({ embedded = false }) {
                   }}
                   style={{
                     border: '1px solid var(--color-border)',
-                    borderRadius: '18px',
+                    borderRadius: '14px',
                     padding: '0.95rem 1rem',
                     background: '#fff',
                     outline: 'none',
@@ -508,7 +508,7 @@ export function NewAttendancePage({ embedded = false }) {
                   placeholder={selectedCountry.placeholder}
                   style={{
                     border: '1px solid var(--color-border)',
-                    borderRadius: '18px',
+                    borderRadius: '14px',
                     padding: '0.95rem 1rem',
                     background: '#fff',
                     outline: 'none',
@@ -525,7 +525,7 @@ export function NewAttendancePage({ embedded = false }) {
                   placeholder="Nome para salvar na agenda"
                   style={{
                     border: '1px solid var(--color-border)',
-                    borderRadius: '18px',
+                    borderRadius: '14px',
                     padding: '0.95rem 1rem',
                     background: '#fff',
                     outline: 'none',
@@ -550,7 +550,7 @@ export function NewAttendancePage({ embedded = false }) {
                   placeholder="Ex: Departamento, vaga ou conta vinculada"
                   style={{
                     border: '1px solid var(--color-border)',
-                    borderRadius: '18px',
+                    borderRadius: '14px',
                     padding: '0.95rem 1rem',
                     background: '#fff',
                     outline: 'none',
@@ -565,7 +565,7 @@ export function NewAttendancePage({ embedded = false }) {
                   onChange={(event) => setSelectedTemplateId(event.target.value)}
                   style={{
                     border: '1px solid var(--color-border)',
-                    borderRadius: '18px',
+                    borderRadius: '14px',
                     padding: '0.95rem 1rem',
                     background: '#fff',
                     outline: 'none',
@@ -597,7 +597,7 @@ export function NewAttendancePage({ embedded = false }) {
                   placeholder="Ex: 26/05/2026"
                   style={{
                     border: '1px solid var(--color-border)',
-                    borderRadius: '18px',
+                    borderRadius: '14px',
                     padding: '0.95rem 1rem',
                     background: '#fff',
                     outline: 'none',
@@ -613,7 +613,7 @@ export function NewAttendancePage({ embedded = false }) {
                   placeholder="https://..."
                   style={{
                     border: '1px solid var(--color-border)',
-                    borderRadius: '18px',
+                    borderRadius: '14px',
                     padding: '0.95rem 1rem',
                     background: '#fff',
                     outline: 'none',
@@ -629,7 +629,7 @@ export function NewAttendancePage({ embedded = false }) {
                   placeholder="Valor livre"
                   style={{
                     border: '1px solid var(--color-border)',
-                    borderRadius: '18px',
+                    borderRadius: '14px',
                     padding: '0.95rem 1rem',
                     background: '#fff',
                     outline: 'none',
@@ -642,7 +642,7 @@ export function NewAttendancePage({ embedded = false }) {
               <div
                 style={{
                   border: '1px solid rgba(0, 49, 80, 0.08)',
-                  borderRadius: '22px',
+                  borderRadius: '16px',
                   padding: '1rem',
                   background: 'linear-gradient(180deg, #e8f3ee, #dcefe8)',
                   minHeight: 220,
@@ -695,7 +695,7 @@ export function NewAttendancePage({ embedded = false }) {
                 placeholder="Contexto inicial deste atendimento."
                 style={{
                   border: '1px solid var(--color-border)',
-                  borderRadius: '18px',
+                  borderRadius: '14px',
                   padding: '0.95rem 1rem',
                   background: '#fff',
                   outline: 'none',
@@ -716,7 +716,7 @@ export function NewAttendancePage({ embedded = false }) {
             >
               <article
                 style={{
-                  borderRadius: '24px',
+                  borderRadius: '18px',
                   padding: '1.25rem',
                   background:
                     'linear-gradient(135deg, rgba(0, 49, 80, 0.98), rgba(11, 90, 134, 0.94))',
@@ -754,7 +754,7 @@ export function NewAttendancePage({ embedded = false }) {
 
               <article
                 style={{
-                  borderRadius: '24px',
+                  borderRadius: '18px',
                   padding: '1.25rem',
                   border: '1px solid var(--color-border)',
                   background: '#fff',
@@ -773,7 +773,7 @@ export function NewAttendancePage({ embedded = false }) {
                       onClick={clearSelection}
                       style={{
                         border: '1px solid var(--color-border)',
-                        borderRadius: '18px',
+                        borderRadius: '14px',
                         padding: '1rem 1.1rem',
                         background: '#fff',
                         color: 'var(--color-primary)',
@@ -789,7 +789,7 @@ export function NewAttendancePage({ embedded = false }) {
                     disabled={!canStartAttendance || isStarting}
                     style={{
                       border: 'none',
-                      borderRadius: '18px',
+                      borderRadius: '14px',
                       padding: '1rem 1.1rem',
                       background: 'linear-gradient(135deg, var(--color-primary), #0b5a86)',
                       color: '#fff',
@@ -808,7 +808,7 @@ export function NewAttendancePage({ embedded = false }) {
             <article
               style={{
                 border: '1px solid var(--color-border)',
-                borderRadius: 24,
+                borderRadius: 18,
                 padding: '1rem',
                 background: '#fff',
                 display: 'grid',
@@ -829,7 +829,7 @@ export function NewAttendancePage({ embedded = false }) {
                 placeholder="Buscar por nome, telefone ou etiqueta"
                 style={{
                   border: '1px solid var(--color-border)',
-                  borderRadius: '16px',
+                  borderRadius: '12px',
                   padding: '0.85rem 0.9rem',
                   background: '#fff',
                   outline: 'none',
@@ -849,7 +849,7 @@ export function NewAttendancePage({ embedded = false }) {
                       style={{
                         border: '1px solid',
                         borderColor: isSelected ? 'rgba(0, 164, 183, 0.36)' : 'var(--color-border)',
-                        borderRadius: 16,
+                        borderRadius: 12,
                         padding: '0.78rem',
                         background: isSelected ? 'rgba(0, 164, 183, 0.08)' : '#fff',
                         textAlign: 'left',
@@ -896,7 +896,7 @@ export function NewAttendancePage({ embedded = false }) {
                   onClick={clearSelection}
                   style={{
                     border: '1px solid var(--color-border)',
-                    borderRadius: 14,
+                    borderRadius: 10,
                     padding: '0.75rem',
                     background: '#fff',
                     color: 'var(--color-primary)',
@@ -911,7 +911,7 @@ export function NewAttendancePage({ embedded = false }) {
             <article
               style={{
                 border: '1px solid rgba(0, 164, 183, 0.24)',
-                borderRadius: 24,
+                borderRadius: 18,
                 padding: '1rem',
                 background: 'rgba(0, 164, 183, 0.06)',
                 color: 'var(--color-text-soft)',

src/modules/auth/components/LoginForm.jsx

@@ -4,7 +4,7 @@ import { useLogin } from '../hooks/useLogin';
 const fieldStyle = {
   width: '100%',
   border: '1px solid var(--color-border)',
-  borderRadius: '16px',
+  borderRadius: '12px',
   padding: '0.95rem 1rem',
   background: '#fff',
   color: 'var(--color-text)',
@@ -14,7 +14,7 @@ const fieldStyle = {
 const primaryButtonStyle = {
   width: '100%',
   padding: '0.95rem 1rem',
-  borderRadius: '16px',
+  borderRadius: '12px',
   border: 'none',
   background: 'linear-gradient(135deg, var(--color-primary), #0b5a86)',
   color: '#fff',
@@ -25,7 +25,7 @@ const primaryButtonStyle = {
 const secondaryButtonStyle = {
   width: '100%',
   padding: '0.95rem 1rem',
-  borderRadius: '16px',
+  borderRadius: '12px',
   border: '1px solid rgba(0, 49, 80, 0.16)',
   background: '#fff',
   color: 'var(--color-primary)',
@@ -95,7 +95,7 @@ export function LoginForm() {
           role="alert"
           style={{
             border: '1px solid rgba(180, 35, 24, 0.24)',
-            borderRadius: 14,
+            borderRadius: 10,
             padding: '0.85rem 1rem',
             background: 'rgba(180, 35, 24, 0.08)',
             color: '#b42318',
@@ -111,7 +111,7 @@ export function LoginForm() {
           role="alert"
           style={{
             border: '1px solid var(--color-border)',
-            borderRadius: 14,
+            borderRadius: 10,
             padding: '0.85rem 1rem',
             background: '#fff',
             color: 'var(--color-text-soft)',

src/modules/auth/pages/LoginPage.jsx

@@ -25,7 +25,7 @@ export function LoginPage() {
             background:
               'linear-gradient(180deg, rgba(0, 49, 80, 0.98) 0%, rgba(11, 90, 134, 0.95) 100%)',
             color: '#fff',
-            borderRadius: '32px',
+            borderRadius: '24px',
             padding: '2.5rem',
             boxShadow: 'var(--shadow-lg)',
             position: 'relative',
@@ -99,7 +99,7 @@ export function LoginPage() {
                 key={item.label}
                 style={{
                   padding: '1rem',
-                  borderRadius: '20px',
+                  borderRadius: '15px',
                   background: 'rgba(255, 255, 255, 0.1)',
                   backdropFilter: 'blur(10px)',
                 }}
@@ -116,7 +116,7 @@ export function LoginPage() {
             background: 'var(--color-surface)',
             backdropFilter: 'blur(12px)',
             border: '1px solid rgba(255, 255, 255, 0.65)',
-            borderRadius: '32px',
+            borderRadius: '24px',
             padding: '2.5rem',
             boxShadow: 'var(--shadow-lg)',
             display: 'grid',

src/modules/call/components/CallControls.jsx

@@ -78,7 +78,7 @@ export function CallControls({ controls, isMobile = false }) {
           type="button"
           style={{
             border: '1px solid rgba(255, 255, 255, 0.12)',
-            borderRadius: '24px',
+            borderRadius: '18px',
             padding: '1rem',
             background: 'rgba(255, 255, 255, 0.06)',
             color: '#fff',
@@ -93,7 +93,7 @@ export function CallControls({ controls, isMobile = false }) {
             style={{
               width: 48,
               height: 48,
-              borderRadius: '16px',
+              borderRadius: '12px',
               background: 'rgba(255, 255, 255, 0.1)',
               display: 'grid',
               placeItems: 'center',

src/modules/call/components/CallHeader.jsx

@@ -41,7 +41,7 @@ export function CallHeader({ isMobile = false }) {
         to="/home"
         style={{
           justifySelf: isMobile ? 'stretch' : 'end',
-          borderRadius: '16px',
+          borderRadius: '12px',
           padding: '0.85rem 1rem',
           background: 'rgba(255, 255, 255, 0.08)',
           color: '#fff',

src/modules/call/pages/CallPage.jsx

@@ -74,7 +74,7 @@ export function CallPage() {
               style={{
                 width: isMobile ? 110 : 132,
                 height: isMobile ? 110 : 132,
-                borderRadius: '32px',
+                borderRadius: '24px',
                 background: 'linear-gradient(135deg, #0d3d5d, #00a4b7)',
                 display: 'grid',
                 placeItems: 'center',
@@ -105,7 +105,7 @@ export function CallPage() {
                 <article
                   key={item.label}
                   style={{
-                    borderRadius: '22px',
+                    borderRadius: '16px',
                     padding: '1rem',
                     background: 'rgba(255, 255, 255, 0.05)',
                   }}
@@ -128,7 +128,7 @@ export function CallPage() {
           >
             <div
               style={{
-                borderRadius: '32px',
+                borderRadius: '24px',
                 padding: isMobile ? '1.5rem' : '2.25rem',
                 background:
                   'radial-gradient(circle at top right, rgba(229, 162, 42, 0.2), transparent 28%), rgba(255, 255, 255, 0.04)',
@@ -181,7 +181,7 @@ export function CallPage() {
             >
               <div
                 style={{
-                  borderRadius: '24px',
+                  borderRadius: '18px',
                   padding: '1rem 1.15rem',
                   background: 'rgba(255, 255, 255, 0.05)',
                   color: 'rgba(255, 255, 255, 0.72)',
@@ -191,7 +191,7 @@ export function CallPage() {
               </div>
               <div
                 style={{
-                  borderRadius: '24px',
+                  borderRadius: '18px',
                   padding: '1rem 1.15rem',
                   background: 'rgba(255, 255, 255, 0.05)',
                   color: 'rgba(255, 255, 255, 0.72)',
@@ -203,7 +203,7 @@ export function CallPage() {
                 type="button"
                 style={{
                   border: 'none',
-                  borderRadius: '24px',
+                  borderRadius: '18px',
                   padding: '1rem 1.4rem',
                   background: 'linear-gradient(135deg, var(--color-secondary), #d43a3a)',
                   color: '#fff',

src/modules/chat/components/ChatConversationList.jsx

@@ -157,7 +157,7 @@ export function ChatConversationList({
       style={{
         background: '#fff',
         border: '1px solid var(--color-border)',
-        borderRadius: '28px',
+        borderRadius: '20px',
         padding: '1rem',
         display: 'grid',
         gridTemplateRows: 'auto minmax(0, 1fr)',
@@ -204,7 +204,7 @@ export function ChatConversationList({
                 border: '1px solid',
                 borderColor: isActive ? 'rgba(0, 164, 183, 0.26)' : 'var(--color-border)',
                 background: isActive ? 'rgba(0, 164, 183, 0.08)' : '#fff',
-                borderRadius: '20px',
+                borderRadius: '15px',
                 padding: '1rem',
                 textAlign: 'left',
                 display: 'grid',
@@ -239,7 +239,7 @@ export function ChatConversationList({
           <div
             style={{
               border: '1px solid var(--color-border)',
-              borderRadius: '18px',
+              borderRadius: '14px',
               padding: '1rem',
               background: 'rgba(0, 49, 80, 0.04)',
               color: 'var(--color-text-soft)',

src/modules/chat/components/ChatTransferPanel.jsx

@@ -19,7 +19,7 @@ export function ChatTransferPanel({
   const fieldStyle = {
     width: '100%',
     border: '1px solid var(--color-border)',
-    borderRadius: '16px',
+    borderRadius: '12px',
     padding: '0.9rem 1rem',
     background: '#fff',
     outline: 'none',
@@ -30,7 +30,7 @@ export function ChatTransferPanel({
       style={{
         background: '#fff',
         border: '1px solid var(--color-border)',
-        borderRadius: '28px',
+        borderRadius: '20px',
         padding: '1.25rem',
         display: 'grid',
         gap: '1rem',
@@ -112,7 +112,7 @@ export function ChatTransferPanel({
         onClick={onSubmit}
         style={{
           border: 'none',
-          borderRadius: '16px',
+          borderRadius: '12px',
           padding: '0.95rem 1rem',
           background: 'linear-gradient(135deg, var(--color-primary), #0b5a86)',
           color: '#fff',

src/modules/chat/components/ChatWindow.jsx

@@ -91,28 +91,21 @@ function DateSeparator({ label }) {
   );
 }
 
-function MediaRenderer({ message, contactId, onLoadMedia, isAgent }) {
+function MediaRenderer({ message, isAgent }) {
-  const mediaUrl = useMemo(() => getMediaUrl(message.media), [message.media]);
+  const mediaUrl = message.mediaUrl || useMemo(() => getMediaUrl(message.media), [message.media]);
-  const mimetype = message.media?.mimetype || '';
+  const mimetype = message.mediaMimeType || message.media?.mimetype || '';
   const filename = message.media?.filename || 'arquivo';
 
-  useEffect(() => {
+  if (!message.hasMedia && !mediaUrl) return null;
-    if (!message.hasMedia || message.media?.data || message.mediaLoading || message.mediaError) {
-      return;
-    }
-    onLoadMedia?.(contactId, message.id);
-  }, [contactId, message, onLoadMedia]);
 
-  if (!message.hasMedia && !message.media) return null;
+  if (!mediaUrl) {
-
-  if (message.mediaLoading || (!message.media?.data && !message.mediaError)) {
     return (
       <div
         style={{
           width: 260,
           maxWidth: '100%',
           height: 150,
-          borderRadius: 14,
+          borderRadius: 10,
           background: isAgent ? 'rgba(255,255,255,0.18)' : 'rgba(0,49,80,0.08)',
           display: 'grid',
           placeItems: 'center',
@@ -125,14 +118,6 @@ function MediaRenderer({ message, contactId, onLoadMedia, isAgent }) {
     );
   }
 
-  if (message.mediaError) {
-    return (
-      <span style={{ color: isAgent ? '#fff' : 'var(--color-text-soft)', fontWeight: 700 }}>
-        Não foi possível carregar a mídia.
-      </span>
-    );
-  }
-
   if (mimetype.startsWith('image/')) {
     return (
       <a href={mediaUrl} target="_blank" rel="noreferrer" style={{ display: 'block' }}>
@@ -145,7 +130,7 @@ function MediaRenderer({ message, contactId, onLoadMedia, isAgent }) {
             maxWidth: '100%',
             maxHeight: 340,
             objectFit: 'cover',
-            borderRadius: 14,
+            borderRadius: 10,
             boxShadow: '0 14px 30px rgba(0,0,0,0.18)',
             transition: 'transform 160ms ease',
           }}
@@ -168,7 +153,7 @@ function MediaRenderer({ message, contactId, onLoadMedia, isAgent }) {
         style={{
           width: 320,
           maxWidth: '100%',
-          borderRadius: 14,
+          borderRadius: 10,
           background: '#111',
         }}
       />
@@ -189,7 +174,7 @@ function MediaRenderer({ message, contactId, onLoadMedia, isAgent }) {
         gap: '0.75rem',
         alignItems: 'center',
         padding: '0.85rem',
-        borderRadius: 14,
+        borderRadius: 10,
         background: isAgent ? 'rgba(255,255,255,0.16)' : '#fff',
         color: isAgent ? '#fff' : 'var(--color-primary)',
         fontWeight: 700,
@@ -209,7 +194,7 @@ function AttachmentPreview({ file, onRemove }) {
     <div
       style={{
         border: '1px solid var(--color-border)',
-        borderRadius: 16,
+        borderRadius: 12,
         padding: '0.75rem',
         display: 'grid',
         gridTemplateColumns: 'auto 1fr auto',
@@ -222,14 +207,14 @@ function AttachmentPreview({ file, onRemove }) {
         <img
           src={mediaUrl}
           alt={file.name}
-          style={{ width: 54, height: 54, objectFit: 'cover', borderRadius: 12 }}
+          style={{ width: 54, height: 54, objectFit: 'cover', borderRadius: 9 }}
         />
       ) : (
         <span
           style={{
             width: 54,
             height: 54,
-            borderRadius: 12,
+            borderRadius: 9,
             display: 'grid',
             placeItems: 'center',
             background: 'rgba(0,49,80,0.08)',
@@ -251,7 +236,7 @@ function AttachmentPreview({ file, onRemove }) {
         title="Remover anexo"
         style={{
           border: 'none',
-          borderRadius: 12,
+          borderRadius: 9,
           width: 36,
           height: 36,
           background: 'rgba(214, 40, 40, 0.1)',
@@ -349,7 +334,7 @@ export function ChatWindow({
         style={{
           background: '#fff',
           border: '1px solid var(--color-border)',
-          borderRadius: '28px',
+          borderRadius: '20px',
           overflow: 'hidden',
           display: 'grid',
           gridTemplateRows: 'auto minmax(0, 1fr)',
@@ -382,7 +367,7 @@ export function ChatWindow({
             style={{
               maxWidth: 460,
               border: '1px solid var(--color-border)',
-              borderRadius: 20,
+              borderRadius: 15,
               padding: '1.2rem',
               background: '#fff',
               color: 'var(--color-text-soft)',
@@ -404,7 +389,7 @@ export function ChatWindow({
       style={{
         background: '#fff',
         border: '1px solid var(--color-border)',
-        borderRadius: '28px',
+        borderRadius: '20px',
         overflow: 'hidden',
         display: 'grid',
         gridTemplateRows: 'auto minmax(0, 1fr) auto',
@@ -442,7 +427,7 @@ export function ChatWindow({
             disabled
             style={{
               border: '1px solid var(--color-border)',
-              borderRadius: '14px',
+              borderRadius: '10px',
               padding: '0.8rem 0.95rem',
               background: '#fff',
               fontWeight: 600,
@@ -459,7 +444,7 @@ export function ChatWindow({
               onClick={() => onAssumeChat?.()}
               style={{
                 border: 'none',
-                borderRadius: '14px',
+                borderRadius: '10px',
                 padding: '0.8rem 1rem',
                 background: 'linear-gradient(135deg, var(--color-primary), #0b5a86)',
                 color: '#fff',
@@ -476,7 +461,7 @@ export function ChatWindow({
                 onClick={onReleaseChat}
                 style={{
                   border: '1px solid var(--color-border)',
-                  borderRadius: '14px',
+                  borderRadius: '10px',
                   padding: '0.8rem 1rem',
                   background: '#fff',
                   color: 'var(--color-primary)',
@@ -490,7 +475,7 @@ export function ChatWindow({
                 onClick={onCloseChat}
                 style={{
                   border: 'none',
-                  borderRadius: '14px',
+                  borderRadius: '10px',
                   padding: '0.8rem 1rem',
                   background: 'rgba(181, 31, 31, 0.1)',
                   color: 'var(--color-secondary)',
@@ -507,7 +492,7 @@ export function ChatWindow({
             disabled={!canReply}
             style={{
               border: 'none',
-              borderRadius: '14px',
+              borderRadius: '10px',
               padding: '0.8rem 1rem',
               background: 'rgba(0, 49, 80, 0.08)',
               color: 'var(--color-primary)',
@@ -523,7 +508,7 @@ export function ChatWindow({
             style={{
               gridColumn: '1 / -1',
               border: '1px solid rgba(0, 164, 183, 0.24)',
-              borderRadius: 16,
+              borderRadius: 12,
               padding: '0.85rem 1rem',
               background: 'rgba(0, 164, 183, 0.07)',
               color: 'var(--color-text)',
@@ -600,8 +585,6 @@ export function ChatWindow({
               >
                 <MediaRenderer
                   message={message}
-                  contactId={safeContact.id}
-                  onLoadMedia={onLoadMedia}
                   isAgent={isAgent}
                 />
                 {parsedText.senderLabel ? (
@@ -652,7 +635,7 @@ export function ChatWindow({
             style={{
               justifySelf: 'center',
               padding: '0.8rem 1rem',
-              borderRadius: 16,
+              borderRadius: 12,
               background: 'rgba(0,49,80,0.06)',
               color: 'var(--color-text-soft)',
               fontWeight: 700,
@@ -694,7 +677,7 @@ export function ChatWindow({
           <div
             style={{
               border: '1px solid var(--color-border)',
-              borderRadius: 16,
+              borderRadius: 12,
               padding: '0.8rem 1rem',
               background: 'rgba(0, 49, 80, 0.04)',
               color: 'var(--color-text-soft)',
@@ -727,7 +710,7 @@ export function ChatWindow({
             title="Anexar arquivo"
             style={{
               border: '1px solid var(--color-border)',
-              borderRadius: 16,
+              borderRadius: 12,
               width: 48,
               height: 48,
               display: 'grid',
@@ -774,7 +757,7 @@ export function ChatWindow({
             }
             style={{
               border: '1px solid var(--color-border)',
-              borderRadius: '18px',
+              borderRadius: '14px',
               padding: '0.95rem 1rem',
               background: '#fff',
               outline: 'none',
@@ -788,7 +771,7 @@ export function ChatWindow({
             disabled={!safeContact.id || !canReply}
             style={{
               border: 'none',
-              borderRadius: '18px',
+              borderRadius: '14px',
               padding: '0.95rem 1.2rem',
               background: 'linear-gradient(135deg, var(--color-primary), #0b5a86)',
               color: '#fff',

src/modules/chat/components/ContactProfilePanel.jsx

@@ -70,7 +70,7 @@ export function ContactProfilePanel({ isOpen, contact, onClose, onSaved }) {
   const fieldStyle = {
     width: '100%',
     border: '1px solid var(--color-border)',
-    borderRadius: '16px',
+    borderRadius: '12px',
     padding: '0.9rem 1rem',
     background: '#fff',
     outline: 'none',
@@ -103,7 +103,7 @@ export function ContactProfilePanel({ isOpen, contact, onClose, onSaved }) {
       style={{
         background: '#fff',
         border: '1px solid var(--color-border)',
-        borderRadius: '28px',
+        borderRadius: '20px',
         padding: '1.25rem',
         display: 'grid',
         gap: '1rem',
@@ -182,7 +182,7 @@ export function ContactProfilePanel({ isOpen, contact, onClose, onSaved }) {
         disabled={isSaving}
         style={{
           border: 'none',
-          borderRadius: '16px',
+          borderRadius: '12px',
           padding: '0.95rem 1rem',
           background: 'linear-gradient(135deg, var(--color-primary), #0b5a86)',
           color: '#fff',

src/modules/chat/hooks/useChat.js

@@ -96,14 +96,18 @@ function normalizeChat(chat) {
 function normalizeMessage(message) {
   const id = getSerializedId(message.id) || message.id || `msg-${Date.now()}`;
   const sender = message.sender || (message.fromMe ? 'agent' : 'customer');
+  const mediaUrl = message.mediaUrl || message.media_path || null;
+  const mediaMimeType = message.mediaMimeType || message.media_mime_type || null;
   return {
     id,
     chatId: message.from || message.to || message.chatId,
     sender,
     text: message.body ?? message.text ?? '',
     timestamp: message.timestamp,
-    hasMedia: Boolean(message.hasMedia || message.media),
+    hasMedia: Boolean(message.hasMedia || message.media || mediaUrl),
     media: message.media || null,
+    mediaUrl,
+    mediaMimeType,
     mediaLoading: false,
     mediaError: null,
   };
@@ -295,7 +299,7 @@ export function useChat() {
     activeAssignment?.status === 'queued' &&
       (isAdminUser || !activeAssignment.area_nome || currentUserAreas.includes(activeAssignment.area_nome)),
   );
-  const canAssumeChat = Boolean(!isPaused && activeContact?.id?.includes('@') && currentUserId && isQueuedForUserArea);
+  const canAssumeChat = Boolean(!isPaused && activeContact?.id && currentUserId && isQueuedForUserArea);
   const canReply = Boolean(!isPaused && isAssignedToCurrentUser && !isWaitingCustomerReply);
   const assignmentLabel = activeAssignment?.user_id
     ? isWaitingCustomerReply
@@ -460,7 +464,7 @@ export function useChat() {
     let isMounted = true;
 
     async function loadMessages() {
-      if (!activeContactId.includes('@')) return;
+      if (!activeContactId) return;
       setIsLoadingMessages(true);
       try {
         const data = await listWhatsappMessages(activeContactId);
@@ -628,7 +632,7 @@ export function useChat() {
   }
 
   async function assumeChat(contactId = activeContactId) {
-    if (!contactId?.includes('@') || !currentUserId) return null;
+    if (!contactId || !currentUserId) return null;
     const targetContact = contacts.find((contact) => contact.id === contactId) || activeContact;
     const targetAssignment = targetContact?.assignment || null;
     const areaId = targetContact?.areaId || targetAssignment?.area_id || areaOptions.find((area) => currentUserAreas.includes(area.nome))?.id;
@@ -636,7 +640,7 @@ export function useChat() {
       const assignment = await assignWhatsappChat({
         chatId: contactId,
         userId: String(currentUserId),
-        areaId,
+        areaId: areaId != null ? String(areaId) : undefined,
       });
       updateContact(contactId, (contact) => ({
         ...contact,
@@ -653,7 +657,7 @@ export function useChat() {
   }
 
   async function releaseChat() {
-    if (!activeContactId?.includes('@')) return;
+    if (!activeContactId) return;
 
     try {
       const assignment = await releaseWhatsappChat(activeContactId);
@@ -670,7 +674,7 @@ export function useChat() {
   }
 
   async function closeChat() {
-    if (!activeContactId?.includes('@')) return;
+    if (!activeContactId) return;
 
     const confirmed = window.confirm('Tem certeza que deseja encerrar este atendimento?');
     if (!confirmed) return;
@@ -786,7 +790,7 @@ export function useChat() {
     }
     setAttachedFile(null);
 
-    if (!contactId.includes('@')) return;
+    if (!contactId) return;
 
     try {
       await sendWhatsappMessage({

src/modules/chat/pages/ChatPage.jsx

@@ -87,7 +87,7 @@ export function ChatPage() {
           width: 'min(1680px, calc(100vw - 3rem))',
           margin: '0 auto',
           background: 'var(--color-surface-strong)',
-          borderRadius: '32px',
+          borderRadius: '24px',
           boxShadow: 'var(--shadow-lg)',
           padding: '1.5rem',
           display: 'grid',
@@ -107,7 +107,7 @@ export function ChatPage() {
             style={{
               justifySelf: isMobile ? 'stretch' : 'center',
               padding: '0.85rem 1rem',
-              borderRadius: '18px',
+              borderRadius: '14px',
               background: 'rgba(0, 49, 80, 0.06)',
               color: 'var(--color-primary)',
               fontWeight: 700,
@@ -120,7 +120,7 @@ export function ChatPage() {
             to="/home"
             style={{
               justifySelf: isMobile ? 'stretch' : 'end',
-              borderRadius: '16px',
+              borderRadius: '12px',
               padding: '0.85rem 1rem',
               background: 'var(--color-primary)',
               color: '#fff',
@@ -197,7 +197,7 @@ export function ChatPage() {
                   disabled={isPaused}
                   style={{
                     border: '1px solid var(--color-border)',
-                    borderRadius: '18px',
+                    borderRadius: '14px',
                     padding: '0.85rem 1rem',
                     background: '#fff',
                     color: 'var(--color-primary)',

src/modules/home/components/AttendantOpsPanel.jsx

@@ -45,7 +45,7 @@ export function AttendantOpsPanel({
       <article
         style={{
           padding: '1.25rem',
-          borderRadius: '24px',
+          borderRadius: '18px',
           border: '1px solid var(--color-border)',
           background: 'linear-gradient(145deg, #ffffff, #f8fafc)',
           boxShadow: 'var(--shadow-sm)',
@@ -77,7 +77,7 @@ export function AttendantOpsPanel({
       <article
         style={{
           padding: '1.25rem',
-          borderRadius: '24px',
+          borderRadius: '18px',
           border: '1px solid var(--color-border)',
           background: 'linear-gradient(145deg, #ffffff, #f8fafc)',
           boxShadow: 'var(--shadow-sm)',
@@ -99,7 +99,7 @@ export function AttendantOpsPanel({
       <article
         style={{
           padding: '1.25rem',
-          borderRadius: '24px',
+          borderRadius: '18px',
           border: '1px solid var(--color-border)',
           background: 'linear-gradient(145deg, #ffffff, #f8fafc)',
           boxShadow: 'var(--shadow-sm)',
@@ -116,7 +116,7 @@ export function AttendantOpsPanel({
             width: '100%',
             height: '100%',
             padding: '1rem',
-            borderRadius: '16px',
+            borderRadius: '12px',
             border: 'none',
             background: isPaused ? 'rgba(16, 185, 129, 0.1)' : 'rgba(239, 68, 68, 0.1)',
             color: isPaused ? '#10b981' : '#ef4444',

src/modules/home/components/CallsWorkspace.jsx

@@ -35,7 +35,7 @@ export function CallsWorkspace({ calls, isWideDesktop = false, isDesktop = false
           onClick={() => navigate('/call')}
           style={{
             border: 'none',
-            borderRadius: '18px',
+            borderRadius: '14px',
             padding: '0.95rem 1.1rem',
             background: 'linear-gradient(135deg, var(--color-primary), #0b5a86)',
             color: '#fff',
@@ -51,7 +51,7 @@ export function CallsWorkspace({ calls, isWideDesktop = false, isDesktop = false
           <article
             key={call.id}
             style={{
-              borderRadius: '22px',
+              borderRadius: '16px',
               border: '1px solid var(--color-border)',
               padding: '1rem 1.1rem',
               display: 'grid',
@@ -78,7 +78,7 @@ export function CallsWorkspace({ calls, isWideDesktop = false, isDesktop = false
               onClick={() => navigate('/call')}
               style={{
                 border: '1px solid var(--color-border)',
-                borderRadius: '14px',
+                borderRadius: '10px',
                 padding: '0.7rem 0.95rem',
                 background: '#fff',
                 color: 'var(--color-primary)',

src/modules/home/components/HomeSidebar.jsx

@@ -9,7 +9,7 @@ export function HomeSidebar({ items, activeItem, isMobile = false }) {
       style={{
         background: 'linear-gradient(180deg, rgba(0, 49, 80, 0.98), rgba(7, 64, 98, 0.96))',
         color: '#fff',
-        borderRadius: '28px',
+        borderRadius: '20px',
         padding: '1.5rem',
         display: 'grid',
         gap: '1.25rem',
@@ -21,7 +21,7 @@ export function HomeSidebar({ items, activeItem, isMobile = false }) {
         onClick={() => navigate('/home')}
         style={{
           border: 'none',
-          borderRadius: '20px',
+          borderRadius: '15px',
           padding: '1rem 1.15rem',
           background: 'linear-gradient(135deg, var(--color-highlight), #f3b94d)',
           color: '#132534',
@@ -49,7 +49,7 @@ export function HomeSidebar({ items, activeItem, isMobile = false }) {
               onClick={() => item.route && navigate(item.route)}
               style={{
                 border: 'none',
-                borderRadius: '18px',
+                borderRadius: '14px',
                 padding: '0.9rem 1rem',
                 background: isActive ? 'rgba(255, 255, 255, 0.14)' : 'transparent',
                 color: '#fff',
@@ -87,7 +87,7 @@ export function HomeSidebar({ items, activeItem, isMobile = false }) {
         }}
         style={{
           border: '1px solid rgba(255, 255, 255, 0.2)',
-          borderRadius: '18px',
+          borderRadius: '14px',
           padding: '0.9rem 1rem',
           background: 'transparent',
           color: '#ef4444',

src/modules/home/components/HomeTopbar.jsx

@@ -57,7 +57,7 @@ export function HomeTopbar({
         style={{
           display: 'inline-flex',
           padding: '0.35rem',
-          borderRadius: '18px',
+          borderRadius: '14px',
           background: 'rgba(0, 49, 80, 0.06)',
           gap: '0.35rem',
           width: isMobile ? '100%' : 'fit-content',
@@ -75,7 +75,7 @@ export function HomeTopbar({
               onClick={() => onTabChange(tab.id)}
               style={{
                 border: 'none',
-                borderRadius: '14px',
+                borderRadius: '10px',
                 padding: '0.8rem 1rem',
                 background: isActive ? 'var(--color-primary)' : 'transparent',
                 color: isActive ? '#fff' : 'var(--color-primary)',
@@ -91,7 +91,7 @@ export function HomeTopbar({
       <div
         style={{
           padding: '0.9rem 1.1rem',
-          borderRadius: '18px',
+          borderRadius: '14px',
           background: '#fff',
           border: '1px solid var(--color-border)',
           color: 'var(--color-text-soft)',
@@ -115,7 +115,7 @@ export function HomeTopbar({
         style={{
           width: '100%',
           border: '1px solid var(--color-border)',
-          borderRadius: '18px',
+          borderRadius: '14px',
           padding: '0.95rem 1rem',
           background: '#fff',
           outline: 'none',
@@ -145,7 +145,7 @@ export function HomeTopbar({
           style={{
             width: 48,
             height: 48,
-            borderRadius: '16px',
+            borderRadius: '12px',
             display: 'grid',
             placeItems: 'center',
             background: 'linear-gradient(135deg, var(--color-accent), var(--color-primary))',

src/modules/home/components/MessagesWorkspace.jsx

@@ -370,7 +370,7 @@ export function MessagesWorkspace({
               style={{
                 border: '1px solid',
                 borderColor: isActive ? 'rgba(0, 164, 183, 0.26)' : 'var(--color-border)',
-                borderRadius: '20px',
+                borderRadius: '15px',
                 padding: '1rem',
                 background: isActive ? 'rgba(0, 164, 183, 0.08)' : '#fff',
                 textAlign: 'left',
@@ -417,7 +417,7 @@ export function MessagesWorkspace({
             disabled={isPaused}
             style={{
               border: '1px solid var(--color-border)',
-              borderRadius: '16px',
+              borderRadius: '12px',
               padding: '0.85rem 1rem',
               background: '#fff',
               color: 'var(--color-primary)',
@@ -471,7 +471,7 @@ export function MessagesWorkspace({
               disabled={isPaused}
               style={{
                 border: '1px solid var(--color-border)',
-                borderRadius: '14px',
+                borderRadius: '10px',
                 padding: '0.7rem 0.9rem',
                 background: '#fff',
                 color: 'var(--color-primary)',
@@ -486,7 +486,7 @@ export function MessagesWorkspace({
               type="button"
               style={{
                 border: 'none',
-                borderRadius: '14px',
+                borderRadius: '10px',
                 padding: '0.7rem 0.9rem',
                 background: 'rgba(0, 49, 80, 0.08)',
                 color: 'var(--color-primary)',
@@ -602,7 +602,7 @@ export function MessagesWorkspace({
               disabled={isPaused}
               style={{
                 border: '1px solid var(--color-border)',
-                borderRadius: '14px',
+                borderRadius: '10px',
                 background: '#fff',
                 color: 'var(--color-primary)',
                 fontWeight: 900,
@@ -618,7 +618,7 @@ export function MessagesWorkspace({
               disabled={isPaused}
               style={{
                 border: '1px solid rgba(0, 164, 183, 0.32)',
-                borderRadius: '16px',
+                borderRadius: '12px',
                 padding: '0.75rem 0.9rem',
                 background: 'rgba(0, 164, 183, 0.07)',
                 color: 'var(--color-text)',
@@ -642,7 +642,7 @@ export function MessagesWorkspace({
               title="Próxima resposta"
               style={{
                 border: '1px solid var(--color-border)',
-                borderRadius: '14px',
+                borderRadius: '10px',
                 background: '#fff',
                 color: 'var(--color-primary)',
                 fontWeight: 900,
@@ -685,7 +685,7 @@ export function MessagesWorkspace({
             <article
               key={message.id}
               style={{
-                borderRadius: '18px',
+                borderRadius: '14px',
                 padding: '0.95rem',
                 background: 'rgba(0, 49, 80, 0.04)',
                 display: 'grid',
@@ -708,7 +708,7 @@ export function MessagesWorkspace({
               rows={4}
               style={{
                 border: '1px solid var(--color-border)',
-                borderRadius: '14px',
+                borderRadius: '10px',
                 padding: '0.85rem 0.9rem',
                 background: '#fff',
                 color: 'var(--color-text)',
@@ -725,7 +725,7 @@ export function MessagesWorkspace({
             disabled={!currentUserId}
             style={{
               border: 'none',
-              borderRadius: '18px',
+              borderRadius: '14px',
               padding: '0.95rem 1rem',
               background: 'linear-gradient(135deg, var(--color-primary), #0b5a86)',
               color: '#fff',
@@ -747,7 +747,7 @@ export function MessagesWorkspace({
                   key={note.id}
                   style={{
                     border: '1px solid var(--color-border)',
-                    borderRadius: '16px',
+                    borderRadius: '12px',
                     padding: '0.8rem',
                     background: '#fff',
                     display: 'grid',

src/modules/home/pages/AgentMassMessagePage.jsx

@@ -71,7 +71,7 @@ export function AgentMassMessagePage() {
           width: 'min(1680px, calc(100vw - 3rem))',
           margin: '0 auto',
           background: 'var(--color-surface-strong)',
-          borderRadius: '32px',
+          borderRadius: '24px',
           boxShadow: 'var(--shadow-lg)',
           padding: '1.5rem',
           display: 'grid',
@@ -91,7 +91,7 @@ export function AgentMassMessagePage() {
               style={{
                 background: '#fff',
                 border: '1px solid var(--color-border)',
-                borderRadius: '28px',
+                borderRadius: '20px',
                 padding: '1.5rem',
               }}
             >
@@ -112,7 +112,7 @@ export function AgentMassMessagePage() {
               <div
                 style={{
                   padding: '1.1rem 1.25rem',
-                  borderRadius: '22px',
+                  borderRadius: '16px',
                   background: '#fff',
                   border: '1px solid var(--color-border)',
                 }}
@@ -131,7 +131,7 @@ export function AgentMassMessagePage() {
                   justifySelf: isMobile ? 'stretch' : 'end',
                   justifyContent: isMobile ? 'space-between' : 'flex-end',
                   padding: '0.85rem 1rem',
-                  borderRadius: '22px',
+                  borderRadius: '16px',
                   background: '#fff',
                   border: '1px solid var(--color-border)',
                 }}
@@ -147,7 +147,7 @@ export function AgentMassMessagePage() {
                   style={{
                     width: 48,
                     height: 48,
-                    borderRadius: '16px',
+                    borderRadius: '12px',
                     display: 'grid',
                     placeItems: 'center',
                     background: 'linear-gradient(135deg, var(--color-accent), var(--color-primary))',

src/modules/home/pages/ContactsPage.jsx

@@ -9,7 +9,7 @@ import { sidebarItems } from '../services/homeMocks';
 const inputStyle = {
   width: '100%',
   border: '1px solid var(--color-border)',
-  borderRadius: 14,
+  borderRadius: 10,
   padding: '0.85rem 0.9rem',
   background: '#fff',
   color: 'var(--color-text)',
@@ -158,7 +158,7 @@ export function ContactsPanel({ embedded = false }) {
       <aside
         style={{
           border: '1px solid var(--color-border)',
-          borderRadius: 24,
+          borderRadius: 18,
           padding: '1rem',
           background: '#fff',
           display: 'grid',
@@ -177,7 +177,7 @@ export function ContactsPanel({ embedded = false }) {
             onClick={startNewContact}
             style={{
               border: 'none',
-              borderRadius: 14,
+              borderRadius: 10,
               padding: '0.7rem 0.85rem',
               background: 'var(--color-highlight)',
               color: '#132534',
@@ -206,7 +206,7 @@ export function ContactsPanel({ embedded = false }) {
                 style={{
                   border: '1px solid',
                   borderColor: isSelected ? 'rgba(0, 164, 183, 0.36)' : 'var(--color-border)',
-                  borderRadius: 16,
+                  borderRadius: 12,
                   padding: '0.8rem',
                   background: isSelected ? 'rgba(0, 164, 183, 0.08)' : '#fff',
                   textAlign: 'left',
@@ -238,7 +238,7 @@ export function ContactsPanel({ embedded = false }) {
         onSubmit={handleSave}
         style={{
           border: '1px solid var(--color-border)',
-          borderRadius: 24,
+          borderRadius: 18,
           padding: '1.2rem',
           background: '#fff',
           display: 'grid',
@@ -324,7 +324,7 @@ export function ContactsPanel({ embedded = false }) {
           disabled={isSaving}
           style={{
             border: 'none',
-            borderRadius: 16,
+            borderRadius: 12,
             padding: '0.95rem 1rem',
             background: 'linear-gradient(135deg, var(--color-primary), #0b5a86)',
             color: '#fff',
@@ -349,7 +349,7 @@ export function ContactsPanel({ embedded = false }) {
           width: 'min(1680px, calc(100vw - 3rem))',
           margin: '0 auto',
           background: 'var(--color-surface-strong)',
-          borderRadius: '32px',
+          borderRadius: '24px',
           boxShadow: 'var(--shadow-lg)',
           padding: '1.5rem',
           display: 'grid',
@@ -369,7 +369,7 @@ export function ContactsPanel({ embedded = false }) {
               style={{
                 background: '#fff',
                 border: '1px solid var(--color-border)',
-                borderRadius: '28px',
+                borderRadius: '20px',
                 padding: '1.5rem',
               }}
             >
@@ -390,7 +390,7 @@ export function ContactsPanel({ embedded = false }) {
               <div
                 style={{
                   padding: '1.1rem 1.25rem',
-                  borderRadius: '22px',
+                  borderRadius: '16px',
                   background: '#fff',
                   border: '1px solid var(--color-border)',
                 }}
@@ -409,7 +409,7 @@ export function ContactsPanel({ embedded = false }) {
                   justifySelf: isMobile ? 'stretch' : 'end',
                   justifyContent: isMobile ? 'space-between' : 'flex-end',
                   padding: '0.85rem 1rem',
-                  borderRadius: '22px',
+                  borderRadius: '16px',
                   background: '#fff',
                   border: '1px solid var(--color-border)',
                 }}
@@ -425,7 +425,7 @@ export function ContactsPanel({ embedded = false }) {
                   style={{
                     width: 48,
                     height: 48,
-                    borderRadius: '16px',
+                    borderRadius: '12px',
                     display: 'grid',
                     placeItems: 'center',
                     background: 'linear-gradient(135deg, var(--color-accent), var(--color-primary))',

src/modules/home/pages/HomePage.jsx

@@ -106,7 +106,7 @@ export function HomePage() {
           width: 'min(1680px, calc(100vw - 3rem))',
           margin: '0 auto',
           background: 'var(--color-surface-strong)',
-          borderRadius: '32px',
+          borderRadius: '24px',
           boxShadow: 'var(--shadow-lg)',
           padding: '1.5rem',
           display: 'grid',
@@ -131,7 +131,7 @@ export function HomePage() {
               style={{
                 background: '#fff',
                 border: '1px solid var(--color-border)',
-                borderRadius: '28px',
+                borderRadius: '20px',
                 padding: '1.5rem',
               }}
             >
@@ -170,7 +170,7 @@ export function HomePage() {
                 <div
                   style={{
                     border: '1px solid var(--color-border)',
-                    borderRadius: 18,
+                    borderRadius: 14,
                     padding: '0.85rem 1rem',
                     background: '#fff',
                     color: 'var(--color-text-soft)',

src/modules/home/pages/UnassignedHomePage.jsx

@@ -25,7 +25,7 @@ export function UnassignedHomePage() {
           width: 'min(760px, 100%)',
           background: '#fff',
           border: '1px solid var(--color-border)',
-          borderRadius: '32px',
+          borderRadius: '24px',
           boxShadow: 'var(--shadow-lg)',
           padding: '2rem',
           display: 'grid',
@@ -56,7 +56,7 @@ export function UnassignedHomePage() {
 
         <div
           style={{
-            borderRadius: '24px',
+            borderRadius: '18px',
             background: 'rgba(0, 49, 80, 0.04)',
             padding: '1.25rem',
             display: 'grid',
@@ -75,7 +75,7 @@ export function UnassignedHomePage() {
           onClick={handleLogout}
           style={{
             border: 'none',
-            borderRadius: '18px',
+            borderRadius: '14px',
             padding: '0.95rem 1.15rem',
             background: 'linear-gradient(135deg, var(--color-primary), #0b5a86)',
             color: '#fff',

src/modules/management/components/DataPanel.jsx

@@ -31,7 +31,7 @@ export function DataPanel({ title, description, actionLabel, onAction, children
             onClick={onAction}
             style={{
               border: 'none',
-              borderRadius: '18px',
+              borderRadius: '14px',
               padding: '0.9rem 1rem',
               background: 'linear-gradient(135deg, var(--color-primary), #0b5a86)',
               color: '#fff',

src/modules/management/components/KnowledgeBasePanel.jsx

@@ -12,7 +12,7 @@ import {
 const fieldStyle = {
   width: '100%',
   border: '1px solid var(--color-border)',
-  borderRadius: 14,
+  borderRadius: 10,
   padding: '0.78rem 0.9rem',
   background: '#fff',
   color: 'var(--color-text)',
@@ -21,7 +21,7 @@ const fieldStyle = {
 
 const primaryButton = {
   border: 'none',
-  borderRadius: 14,
+  borderRadius: 10,
   padding: '0.78rem 1rem',
   background: 'var(--color-primary)',
   color: '#fff',
@@ -30,7 +30,7 @@ const primaryButton = {
 
 const ghostButton = {
   border: '1px solid var(--color-border)',
-  borderRadius: 14,
+  borderRadius: 10,
   padding: '0.72rem 0.9rem',
   background: '#fff',
   color: 'var(--color-text)',
@@ -109,7 +109,7 @@ function WhatsAppPreview({ message }) {
     <div
       style={{
         background: '#e7f5ef',
-        borderRadius: 18,
+        borderRadius: 14,
         padding: '0.85rem',
         display: 'grid',
         gap: '0.45rem',
@@ -172,7 +172,7 @@ function FlowNode({ node, areasById, onAdd, onEdit, onDelete, level = 0, parentT
           width: nodeWidth,
           border: '1px solid var(--color-border)',
           borderTop: `5px solid ${accentColor}`,
-          borderRadius: 18,
+          borderRadius: 14,
           background: isRoot
             ? 'linear-gradient(180deg, #fff, rgba(0,164,183,0.09))'
             : isAgent
@@ -220,7 +220,7 @@ function FlowNode({ node, areasById, onAdd, onEdit, onDelete, level = 0, parentT
               style={{
                 width: 34,
                 height: 34,
-                borderRadius: 12,
+                borderRadius: 9,
                 border: 'none',
                 background: 'var(--color-highlight)',
                 color: '#132534',
@@ -414,7 +414,7 @@ function NodeModal({ mode, node, parent, areas, draft, onDraftChange, onClose, o
           width: 'min(760px, calc(100vw - 2rem))',
           maxHeight: 'calc(100vh - 2rem)',
           overflowY: 'auto',
-          borderRadius: 24,
+          borderRadius: 18,
           background: '#fff',
           boxShadow: 'var(--shadow-lg)',
           padding: '1.25rem',
@@ -447,7 +447,7 @@ function NodeModal({ mode, node, parent, areas, draft, onDraftChange, onClose, o
                 onClick={() => change('nodeType', type)}
                 style={{
                   border: `1px solid ${draft.nodeType === type ? 'var(--color-primary)' : 'var(--color-border)'}`,
-                  borderRadius: 16,
+                  borderRadius: 12,
                   padding: '0.9rem',
                   background: draft.nodeType === type ? 'rgba(0,164,183,0.08)' : '#fff',
                   color: 'var(--color-text)',
@@ -743,7 +743,7 @@ export function KnowledgeBasePanel({ areas, mode = 'admin', isMobile = false })
             <div
               style={{
                 border: '1px solid rgba(241,184,42,0.45)',
-                borderRadius: 16,
+                borderRadius: 12,
                 background: 'rgba(241,184,42,0.12)',
                 padding: '0.85rem 1rem',
                 color: 'var(--color-text)',
@@ -763,7 +763,7 @@ export function KnowledgeBasePanel({ areas, mode = 'admin', isMobile = false })
           <div
             style={{
               border: '1px solid var(--color-border)',
-              borderRadius: 22,
+              borderRadius: 16,
               background:
                 'linear-gradient(180deg, #fff, rgba(0,49,80,0.03)), radial-gradient(circle at 1px 1px, rgba(0,49,80,0.08) 1px, transparent 0)',
               backgroundSize: 'auto, 22px 22px',
@@ -800,7 +800,7 @@ export function KnowledgeBasePanel({ areas, mode = 'admin', isMobile = false })
           {status ? (
             <span
               style={{
-                borderRadius: 14,
+                borderRadius: 10,
                 padding: '0.75rem 0.85rem',
                 background:
                   statusTone === 'error'
@@ -828,7 +828,7 @@ export function KnowledgeBasePanel({ areas, mode = 'admin', isMobile = false })
               key={version.id}
               style={{
                 border: '1px solid var(--color-border)',
-                borderRadius: 14,
+                borderRadius: 10,
                 padding: '0.75rem 0.85rem',
                 display: 'flex',
                 justifyContent: 'space-between',

src/modules/management/components/ManagementLayout.jsx

@@ -64,45 +64,52 @@ export function ManagementLayout({
     <main style={{ minHeight: '100vh', padding: '1.5rem' }}>
       <section
         style={{
-          width: 'min(1680px, calc(100vw - 3rem))',
+          width: 'min(1600px, calc(100vw - 3rem))',
           margin: '0 auto',
           background: 'var(--color-surface-strong)',
-          borderRadius: '32px',
+          borderRadius: '24px',
           boxShadow: 'var(--shadow-lg)',
           padding: '1.5rem',
           display: 'grid',
           gap: '1.5rem',
         }}
       >
+        {/* Grid plano de 4 zonas: col1=sidebar(270px) col2=conteúdo(1fr), row1=topo row2=corpo */}
         <div
           style={{
             display: 'grid',
-            gridTemplateColumns: isDesktop ? 'minmax(300px, 360px) minmax(0, 1fr)' : '1fr',
+            gridTemplateColumns: isDesktop ? '270px 1fr' : '1fr',
-            gap: '1.5rem',
+            columnGap: '1.5rem',
-            alignItems: 'start',
+            rowGap: '1.25rem',
           }}
         >
-          <div style={{ display: 'grid', gap: '1.25rem' }}>
+          {/* Zona 1 — BrandMark card: col1 row1 */}
           <div
             style={{
               background: '#fff',
               border: '1px solid var(--color-border)',
-                borderRadius: '28px',
+              borderRadius: '20px',
-                padding: '1.5rem',
+              padding: '0.85rem 1rem',
+              overflow: 'hidden',
+              minWidth: 0,
+              ...(isDesktop ? { gridColumn: 1, gridRow: 1 } : {}),
             }}
           >
-              <BrandMark size="lg" />
+            <BrandMark size="md" />
           </div>
 
+          {/* Zona 2 — Aside/menu: col1 row2 */}
           <aside
             style={{
               background: 'linear-gradient(180deg, rgba(0, 49, 80, 0.98), rgba(7, 64, 98, 0.96))',
               color: '#fff',
-                borderRadius: '28px',
+              borderRadius: '20px',
               padding: '1.5rem',
               display: 'grid',
               gap: '1.25rem',
               alignContent: 'start',
+              alignSelf: 'start',
+              ...(isDesktop ? { gridColumn: 1, gridRow: 2 } : {}),
             }}
           >
             <button
@@ -117,7 +124,7 @@ export function ManagementLayout({
               }}
               style={{
                 border: 'none',
-                  borderRadius: '20px',
+                borderRadius: '15px',
                 padding: '1rem 1.15rem',
                 background: 'linear-gradient(135deg, var(--color-highlight), #f3b94d)',
                 color: '#132534',
@@ -164,7 +171,7 @@ export function ManagementLayout({
                     }}
                     style={{
                       border: 'none',
-                        borderRadius: '18px',
+                      borderRadius: '14px',
                       padding: '0.9rem 1rem',
                       background: isActive ? 'rgba(255, 255, 255, 0.14)' : 'transparent',
                       color: '#fff',
@@ -201,7 +208,7 @@ export function ManagementLayout({
               onClick={handleLogout}
               style={{
                 border: '1px solid rgba(255, 255, 255, 0.18)',
-                  borderRadius: '18px',
+                borderRadius: '14px',
                 padding: '0.9rem 1rem',
                 background: 'transparent',
                 color: '#ef4444',
@@ -212,28 +219,31 @@ export function ManagementLayout({
               Sair
             </button>
           </aside>
-          </div>
 
-          <div style={{ display: 'grid', gap: '1.25rem', minWidth: 0 }}>
+          {/* Zona 3 — Header: col2 row1 — mesma linha do BrandMark card */}
           <header
             style={{
               display: 'grid',
               gridTemplateColumns: isMobile ? '1fr' : 'minmax(0, 1fr) auto',
               gap: '1rem',
-                alignItems: 'center',
+              alignItems: 'stretch',
+              ...(isDesktop ? { gridColumn: 2, gridRow: 1 } : {}),
             }}
           >
             <div
               style={{
-                  padding: '1.1rem 1.25rem',
+                padding: '0.75rem 1.1rem',
-                  borderRadius: '22px',
+                borderRadius: '16px',
                 background: '#fff',
                 border: '1px solid var(--color-border)',
                 minWidth: 0,
+                display: 'flex',
+                flexDirection: 'column',
+                justifyContent: 'center',
               }}
             >
-                <h1 style={{ margin: 0, fontSize: '1.65rem' }}>{title}</h1>
+              <h1 style={{ margin: 0, fontSize: '1.4rem' }}>{title}</h1>
-                <p style={{ margin: '0.45rem 0 0', color: 'var(--color-text-soft)' }}>
+              <p style={{ margin: '0.3rem 0 0', color: 'var(--color-text-soft)' }}>
                 {subtitle}
               </p>
             </div>
@@ -245,8 +255,8 @@ export function ManagementLayout({
                 gap: '0.9rem',
                 justifySelf: isMobile ? 'stretch' : 'end',
                 justifyContent: isMobile ? 'space-between' : 'flex-end',
-                  padding: '0.85rem 1rem',
+                padding: '0.6rem 0.85rem',
-                  borderRadius: '22px',
+                borderRadius: '16px',
                 background: '#fff',
                 border: '1px solid var(--color-border)',
               }}
@@ -260,9 +270,9 @@ export function ManagementLayout({
               <div
                 aria-hidden="true"
                 style={{
-                    width: 48,
+                  width: 40,
-                    height: 48,
+                  height: 40,
-                    borderRadius: '16px',
+                  borderRadius: '10px',
                   display: 'grid',
                   placeItems: 'center',
                   background: 'linear-gradient(135deg, var(--color-accent), var(--color-primary))',
@@ -275,6 +285,16 @@ export function ManagementLayout({
             </div>
           </header>
 
+          {/* Zona 4 — Conteúdo: col2 row2 */}
+          <div
+            style={{
+              display: 'grid',
+              gap: '1.25rem',
+              alignContent: 'start',
+              minWidth: 0,
+              ...(isDesktop ? { gridColumn: 2, gridRow: 2 } : {}),
+            }}
+          >
             {children}
           </div>
         </div>

src/modules/management/components/ManagementTable.jsx

@@ -23,7 +23,7 @@ export function ManagementTable({ columns, rows, getRowId, isMobile = false }) {
         <article
           key={getRowId(row)}
           style={{
-            borderRadius: '20px',
+            borderRadius: '15px',
             border: '1px solid var(--color-border)',
             padding: '1rem',
             display: 'grid',

src/modules/management/components/MassMessagePanel.jsx

@@ -8,7 +8,7 @@ import { listTemplates } from '../services/templateService';
 const inputStyle = {
   width: '100%',
   border: '1px solid var(--color-border)',
-  borderRadius: 14,
+  borderRadius: 10,
   padding: '0.85rem 0.9rem',
   background: '#fff',
   color: 'var(--color-text)',
@@ -347,7 +347,7 @@ export function MassMessagePanel({
             disabled={isSending}
             style={{
               border: 'none',
-              borderRadius: 16,
+              borderRadius: 12,
               padding: '0.95rem 1rem',
               background: 'linear-gradient(135deg, var(--color-primary), #0b5a86)',
               color: '#fff',
@@ -365,7 +365,7 @@ export function MassMessagePanel({
           <article
             style={{
               border: '1px solid var(--color-border)',
-              borderRadius: 18,
+              borderRadius: 14,
               padding: '1rem',
               background: '#fff',
               display: 'grid',
@@ -395,7 +395,7 @@ export function MassMessagePanel({
                     style={{
                       border: '1px solid',
                       borderColor: isSelected ? 'rgba(0, 164, 183, 0.36)' : 'var(--color-border)',
-                      borderRadius: 14,
+                      borderRadius: 10,
                       padding: '0.7rem',
                       background: isSelected ? 'rgba(0, 164, 183, 0.08)' : '#fff',
                       textAlign: 'left',
@@ -422,7 +422,7 @@ export function MassMessagePanel({
                 onClick={clearSelectedContacts}
                 style={{
                   border: '1px solid var(--color-border)',
-                  borderRadius: 14,
+                  borderRadius: 10,
                   padding: '0.75rem',
                   background: '#fff',
                   color: 'var(--color-primary)',
@@ -437,7 +437,7 @@ export function MassMessagePanel({
           <article
             style={{
               border: '1px solid rgba(0, 164, 183, 0.24)',
-              borderRadius: 18,
+              borderRadius: 14,
               padding: '1rem',
               background: 'rgba(0, 164, 183, 0.06)',
               lineHeight: 1.5,
@@ -454,7 +454,7 @@ export function MassMessagePanel({
           <article
             style={{
               border: '1px solid var(--color-border)',
-              borderRadius: 18,
+              borderRadius: 14,
               padding: '1rem',
               background: '#fff',
               color: 'var(--color-text-soft)',
@@ -470,7 +470,7 @@ export function MassMessagePanel({
                 key={`${result.number}-${result.status}`}
                 style={{
                   border: '1px solid var(--color-border)',
-                  borderRadius: 14,
+                  borderRadius: 10,
                   padding: '0.75rem',
                   background: result.status === 'enviado' ? 'rgba(16,185,129,0.08)' : 'rgba(181,31,31,0.08)',
                 }}

src/modules/management/components/MetricGrid.jsx

@@ -12,7 +12,7 @@ export function MetricGrid({ metrics, minCardWidth = '180px' }) {
           key={item.label}
           style={{
             padding: '1.15rem',
-            borderRadius: '22px',
+            borderRadius: '16px',
             border: '1px solid var(--color-border)',
             background: '#fff',
           }}

src/modules/management/components/OperationalDashboard.jsx

@@ -5,7 +5,7 @@ import { MetricGrid } from './MetricGrid';
 const selectStyle = {
   width: '100%',
   border: '1px solid var(--color-border)',
-  borderRadius: '14px',
+  borderRadius: '10px',
   padding: '0.75rem 0.85rem',
   background: '#fff',
   color: 'var(--color-text)',
@@ -237,7 +237,7 @@ export function OperationalDashboard({ isDesktop, isMobile }) {
                 key={item.id}
                 style={{
                   border: '1px solid var(--color-border)',
-                  borderRadius: 16,
+                  borderRadius: 12,
                   padding: '0.8rem',
                   background: '#fff',
                   display: 'grid',
@@ -258,7 +258,7 @@ export function OperationalDashboard({ isDesktop, isMobile }) {
                   onClick={() => setAssignmentTarget(item)}
                   style={{
                     border: 'none',
-                    borderRadius: 12,
+                    borderRadius: 9,
                     padding: '0.65rem 0.8rem',
                     background: 'var(--color-primary)',
                     color: '#fff',
@@ -291,7 +291,7 @@ export function OperationalDashboard({ isDesktop, isMobile }) {
             zIndex: 20,
           }}
         >
-          <div style={{ width: 'min(460px, 100%)', background: '#fff', borderRadius: 22, padding: '1.25rem', boxShadow: 'var(--shadow-lg)', display: 'grid', gap: '1rem' }}>
+          <div style={{ width: 'min(460px, 100%)', background: '#fff', borderRadius: 16, padding: '1.25rem', boxShadow: 'var(--shadow-lg)', display: 'grid', gap: '1rem' }}>
             <div>
               <h2 style={{ margin: 0, fontSize: '1.2rem' }}>Atribuir atendimento</h2>
               <p style={{ margin: '0.35rem 0 0', color: 'var(--color-text-soft)' }}>
@@ -306,7 +306,7 @@ export function OperationalDashboard({ isDesktop, isMobile }) {
                   onClick={() => setAssignmentTarget(null)}
                   style={{
                     border: '1px solid var(--color-border)',
-                    borderRadius: 14,
+                    borderRadius: 10,
                     padding: '0.8rem 0.9rem',
                     background: '#fff',
                     color: 'var(--color-text)',
@@ -325,7 +325,7 @@ export function OperationalDashboard({ isDesktop, isMobile }) {
               onClick={() => setAssignmentTarget(null)}
               style={{
                 border: 'none',
-                borderRadius: 14,
+                borderRadius: 10,
                 padding: '0.8rem 1rem',
                 background: 'rgba(0, 49, 80, 0.08)',
                 color: 'var(--color-primary)',

src/modules/management/components/WhatsappConfigModal.jsx

@@ -0,0 +1,403 @@
+import { useEffect, useState } from 'react';
+import {
+  getWhatsappConfig,
+  saveWhatsappConfig,
+} from '../services/whatsappConfigService';
+
+const fieldStyle = {
+  width: '100%',
+  border: '1px solid var(--color-border)',
+  borderRadius: 9,
+  padding: '0.7rem 0.85rem',
+  background: '#fff',
+  color: 'var(--color-text)',
+  fontWeight: 600,
+  fontSize: '0.92rem',
+  boxSizing: 'border-box',
+};
+
+const labelStyle = {
+  display: 'block',
+  fontSize: '0.8rem',
+  fontWeight: 800,
+  color: 'var(--color-text-soft)',
+  marginBottom: '0.35rem',
+  letterSpacing: '0.03em',
+  textTransform: 'uppercase',
+};
+
+export function WhatsappConfigModal({ onClose }) {
+  const [loading, setLoading] = useState(true);
+  const [currentConfig, setCurrentConfig] = useState(null);
+  const [saving, setSaving] = useState(false);
+  const [validating, setValidating] = useState(false);
+  const [validation, setValidation] = useState(null);
+  const [saveSuccess, setSaveSuccess] = useState(false);
+  const [error, setError] = useState('');
+
+  const [form, setForm] = useState({
+    access_token: '',
+    phone_number_id: '',
+    api_version: 'v25.0',
+    webhook_token: '',
+    waba_id: '',
+  });
+
+  useEffect(() => {
+    getWhatsappConfig()
+      .then((data) => {
+        setCurrentConfig(data);
+        setForm((f) => ({
+          ...f,
+          phone_number_id: data.phone_number_id || '',
+          api_version: data.api_version || 'v25.0',
+          webhook_token: data.webhook_token || '',
+          waba_id: data.waba_id || '',
+        }));
+      })
+      .catch(() => setError('Não foi possível carregar a configuração atual.'))
+      .finally(() => setLoading(false));
+  }, []);
+
+  function handleChange(field, value) {
+    setValidation(null);
+    setSaveSuccess(false);
+    setError('');
+    setForm((f) => ({ ...f, [field]: value }));
+  }
+
+  async function handleValidate() {
+    if (!form.access_token || !form.phone_number_id) return;
+    setValidating(true);
+    setValidation(null);
+    const apiVersion = form.api_version || 'v25.0';
+    const url =
+      `https://graph.facebook.com/${apiVersion}/${form.phone_number_id}` +
+      `?access_token=${encodeURIComponent(form.access_token)}&fields=display_phone_number,verified_name,quality_rating`;
+    try {
+      const response = await fetch(url);
+      const data = await response.json();
+      if (!response.ok) {
+        setValidation({
+          valid: false,
+          error: data?.error?.message || 'Credenciais inválidas',
+          code: data?.error?.code,
+        });
+      } else {
+        setValidation({
+          valid: true,
+          phone_number: data.display_phone_number,
+          verified_name: data.verified_name,
+          quality_rating: data.quality_rating,
+        });
+      }
+    } catch {
+      setValidation({ valid: false, error: 'Sem acesso à internet para validar' });
+    } finally {
+      setValidating(false);
+    }
+  }
+
+  async function handleSave() {
+    setSaving(true);
+    setSaveSuccess(false);
+    setError('');
+    try {
+      await saveWhatsappConfig(form);
+      setSaveSuccess(true);
+      setTimeout(onClose, 1200);
+    } catch (err) {
+      const msg = err?.message || '';
+      setError(`Erro ao salvar${msg ? `: ${msg}` : '. Verifique se a migration 025 foi executada no banco.'}`);
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  const canValidate = !!(form.access_token && form.phone_number_id);
+  const canSave = !!(form.access_token || form.phone_number_id) && !saving;
+
+  return (
+    <div
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="wa-config-title"
+      style={{
+        position: 'fixed',
+        inset: 0,
+        background: 'rgba(0, 20, 32, 0.42)',
+        display: 'grid',
+        placeItems: 'center',
+        padding: '1rem',
+        zIndex: 50,
+      }}
+      onClick={onClose}
+    >
+      <div
+        onClick={(e) => e.stopPropagation()}
+        style={{
+          width: 'min(540px, 100%)',
+          borderRadius: 16,
+          border: '1px solid var(--color-border)',
+          background: '#fff',
+          padding: '1.4rem',
+          display: 'grid',
+          gap: '1rem',
+          boxShadow: 'var(--shadow-lg)',
+          maxHeight: '90vh',
+          overflowY: 'auto',
+        }}
+      >
+        {/* Header */}
+        <div style={{ display: 'flex', alignItems: 'center', gap: '0.85rem' }}>
+          <div
+            aria-hidden="true"
+            style={{
+              width: 46,
+              height: 46,
+              borderRadius: 10,
+              display: 'grid',
+              placeItems: 'center',
+              background: '#20a45b',
+              color: '#fff',
+              fontWeight: 900,
+              fontSize: '1rem',
+              flexShrink: 0,
+            }}
+          >
+            WA
+          </div>
+          <div>
+            <strong id="wa-config-title" style={{ display: 'block', fontSize: '1.05rem' }}>
+              Configurar WhatsApp
+            </strong>
+            <span style={{ color: 'var(--color-text-soft)', fontWeight: 700, fontSize: '0.88rem' }}>
+              Meta Cloud API
+            </span>
+          </div>
+          <button
+            type="button"
+            aria-label="Fechar"
+            onClick={onClose}
+            style={{
+              marginLeft: 'auto',
+              border: 'none',
+              background: 'none',
+              fontSize: '1.3rem',
+              cursor: 'pointer',
+              color: 'var(--color-text-soft)',
+              lineHeight: 1,
+              padding: '0.2rem 0.4rem',
+            }}
+          >
+            ×
+          </button>
+        </div>
+
+        {/* Status atual */}
+        {!loading && currentConfig && (
+          <div
+            style={{
+              borderRadius: 9,
+              padding: '0.7rem 0.9rem',
+              background: currentConfig.is_configured ? '#f0faf4' : '#fff8f0',
+              border: `1px solid ${currentConfig.is_configured ? '#b6e8c8' : '#f5d9a8'}`,
+              display: 'flex',
+              alignItems: 'center',
+              gap: '0.6rem',
+            }}
+          >
+            <span style={{ fontSize: '1.1rem' }}>{currentConfig.is_configured ? '✅' : '⚠️'}</span>
+            <div>
+              <strong style={{ fontSize: '0.88rem', color: currentConfig.is_configured ? '#1a7a44' : '#a05a00' }}>
+                {currentConfig.is_configured ? 'Integração configurada' : 'Configuração incompleta'}
+              </strong>
+              {currentConfig.is_configured && (
+                <span style={{ display: 'block', fontSize: '0.8rem', color: 'var(--color-text-soft)', fontWeight: 600 }}>
+                  Token via {currentConfig.token_source === 'database' ? 'banco de dados' : 'variável de ambiente'}
+                  {currentConfig.phone_number_id ? ` · ID: ${currentConfig.phone_number_id}` : ''}
+                </span>
+              )}
+              {!currentConfig.is_configured && (
+                <span style={{ display: 'block', fontSize: '0.8rem', color: 'var(--color-text-soft)', fontWeight: 600 }}>
+                  Preencha o Token e o Phone Number ID abaixo
+                </span>
+              )}
+            </div>
+          </div>
+        )}
+
+        {loading && (
+          <p style={{ margin: 0, color: 'var(--color-text-soft)', fontWeight: 700, fontSize: '0.9rem' }}>
+            Carregando configuração atual…
+          </p>
+        )}
+
+        {/* Formulário */}
+        <div style={{ display: 'grid', gap: '0.75rem' }}>
+          <div>
+            <label htmlFor="wa-token" style={labelStyle}>
+              Access Token{currentConfig?.has_token ? ' (deixe vazio para manter o atual)' : ''}
+            </label>
+            <input
+              id="wa-token"
+              type="password"
+              autoComplete="off"
+              placeholder={currentConfig?.has_token ? '••••••••  (configurado)' : 'EAAxxxxxxx...'}
+              value={form.access_token}
+              onChange={(e) => handleChange('access_token', e.target.value)}
+              style={fieldStyle}
+            />
+          </div>
+
+          <div>
+            <label htmlFor="wa-phone-id" style={labelStyle}>
+              Phone Number ID
+            </label>
+            <input
+              id="wa-phone-id"
+              type="text"
+              placeholder="ex: 123456789012345"
+              value={form.phone_number_id}
+              onChange={(e) => handleChange('phone_number_id', e.target.value)}
+              style={fieldStyle}
+            />
+          </div>
+
+          <div>
+            <label htmlFor="wa-waba-id" style={labelStyle}>
+              WABA ID (WhatsApp Business Account ID)
+            </label>
+            <input
+              id="wa-waba-id"
+              type="text"
+              placeholder="ex: 123456789012345"
+              value={form.waba_id}
+              onChange={(e) => handleChange('waba_id', e.target.value)}
+              style={fieldStyle}
+            />
+            <p style={{ margin: '0.2rem 0 0', fontSize: '0.75rem', color: 'var(--color-text-soft)', fontWeight: 600 }}>
+              Necessário para criar e sincronizar templates HSM.
+            </p>
+          </div>
+
+          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0.65rem' }}>
+            <div>
+              <label htmlFor="wa-api-version" style={labelStyle}>
+                Versão da API
+              </label>
+              <input
+                id="wa-api-version"
+                type="text"
+                placeholder="v25.0"
+                value={form.api_version}
+                onChange={(e) => handleChange('api_version', e.target.value)}
+                style={fieldStyle}
+              />
+            </div>
+            <div>
+              <label htmlFor="wa-webhook-token" style={labelStyle}>
+                Webhook Verify Token
+              </label>
+              <input
+                id="wa-webhook-token"
+                type="text"
+                placeholder="token de verificação"
+                value={form.webhook_token}
+                onChange={(e) => handleChange('webhook_token', e.target.value)}
+                style={fieldStyle}
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* Resultado da validação */}
+        {validation && (
+          <div
+            style={{
+              borderRadius: 9,
+              padding: '0.7rem 0.9rem',
+              background: validation.valid ? '#f0faf4' : '#fff2f2',
+              border: `1px solid ${validation.valid ? '#b6e8c8' : '#f5c6c6'}`,
+            }}
+          >
+            {validation.valid ? (
+              <>
+                <strong style={{ color: '#1a7a44', fontSize: '0.88rem' }}>
+                  ✅ Credenciais válidas
+                </strong>
+                <span style={{ display: 'block', color: 'var(--color-text-soft)', fontSize: '0.82rem', fontWeight: 600, marginTop: '0.2rem' }}>
+                  {validation.verified_name && `Conta: ${validation.verified_name}`}
+                  {validation.phone_number && ` · ${validation.phone_number}`}
+                  {validation.quality_rating && ` · Qualidade: ${validation.quality_rating}`}
+                </span>
+              </>
+            ) : (
+              <>
+                <strong style={{ color: '#b00020', fontSize: '0.88rem' }}>
+                  ❌ Credenciais inválidas
+                </strong>
+                <span style={{ display: 'block', color: 'var(--color-text-soft)', fontSize: '0.82rem', fontWeight: 600, marginTop: '0.2rem' }}>
+                  {validation.error || 'Verifique o Token e o Phone Number ID'}
+                  {validation.code ? ` (código ${validation.code})` : ''}
+                </span>
+              </>
+            )}
+          </div>
+        )}
+
+        {/* Feedback de erro geral */}
+        {error && (
+          <p style={{ margin: 0, color: '#b00020', fontWeight: 700, fontSize: '0.88rem' }}>
+            {error}
+          </p>
+        )}
+
+        {/* Feedback de sucesso */}
+        {saveSuccess && (
+          <p style={{ margin: 0, color: '#1a7a44', fontWeight: 700, fontSize: '0.88rem' }}>
+            ✅ Configuração salva com sucesso!
+          </p>
+        )}
+
+        {/* Ações */}
+        <div style={{ display: 'flex', gap: '0.65rem', justifyContent: 'flex-end', flexWrap: 'wrap' }}>
+          <button
+            type="button"
+            onClick={handleValidate}
+            disabled={!canValidate || validating}
+            style={{
+              border: '1px solid #20a45b44',
+              borderRadius: 10,
+              padding: '0.65rem 0.9rem',
+              background: '#fff',
+              color: canValidate ? '#20a45b' : 'var(--color-text-soft)',
+              fontWeight: 800,
+              cursor: canValidate && !validating ? 'pointer' : 'not-allowed',
+              opacity: canValidate && !validating ? 1 : 0.6,
+            }}
+          >
+            {validating ? 'Validando…' : 'Validar credenciais'}
+          </button>
+
+          <button
+            type="button"
+            onClick={handleSave}
+            disabled={!canSave}
+            style={{
+              border: 'none',
+              borderRadius: 10,
+              padding: '0.65rem 1rem',
+              background: canSave ? 'var(--color-primary)' : 'var(--color-border)',
+              color: '#fff',
+              fontWeight: 800,
+              cursor: canSave ? 'pointer' : 'not-allowed',
+            }}
+          >
+            {saving ? 'Salvando…' : 'Salvar'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/modules/management/pages/AdminPage.jsx

@@ -31,11 +31,12 @@ import {
 } from '../services/adminAccessService';
 import { useViewport } from '../../../shared/hooks/useViewport';
 import { getCurrentUserDisplay } from '../../auth/services/sessionService';
+import { WhatsappConfigModal } from '../components/WhatsappConfigModal';
 
 const selectStyle = {
   width: '100%',
   border: '1px solid var(--color-border)',
-  borderRadius: '14px',
+  borderRadius: '10px',
   padding: '0.75rem 0.85rem',
   background: '#fff',
   color: 'var(--color-text)',
@@ -44,7 +45,7 @@ const selectStyle = {
 
 const compactSelectStyle = {
   ...selectStyle,
-  borderRadius: '10px',
+  borderRadius: '8px',
   padding: '0.45rem 0.55rem',
   fontSize: '0.82rem',
 };
@@ -183,7 +184,7 @@ export function AdminAttendanceWorkspace({ isWideDesktop, isDesktop, isTablet, i
         <div
           style={{
             border: '1px solid var(--color-border)',
-            borderRadius: 18,
+            borderRadius: 14,
             padding: '0.85rem 1rem',
             background: '#fff',
             color: 'var(--color-text-soft)',
@@ -256,6 +257,7 @@ export function AdminPage() {
   const [authConfigModal, setAuthConfigModal] = useState(null);
   const [integrationNotice, setIntegrationNotice] = useState('');
   const [configurationModal, setConfigurationModal] = useState(null);
+  const [whatsappConfigModal, setWhatsappConfigModal] = useState(false);
 
   useEffect(() => {
     let isMounted = true;
@@ -658,7 +660,7 @@ export function AdminPage() {
             onClick={() => openUserEditor(row)}
             style={{
               border: 'none',
-              borderRadius: 14,
+              borderRadius: 10,
               padding: '0.7rem 0.9rem',
               background: 'var(--color-primary)',
               color: '#fff',
@@ -721,7 +723,7 @@ export function AdminPage() {
               onClick={() => openAreaEditor(row)}
               style={{
                 border: 'none',
-                borderRadius: 12,
+                borderRadius: 9,
                 padding: '0.55rem 0.7rem',
                 background: 'var(--color-primary)',
                 color: '#fff',
@@ -735,7 +737,7 @@ export function AdminPage() {
               onClick={() => handleDeleteArea(row)}
               style={{
                 border: 'none',
-                borderRadius: 12,
+                borderRadius: 9,
                 padding: '0.55rem 0.7rem',
                 background: 'rgba(181, 31, 31, 0.1)',
                 color: 'var(--color-secondary)',
@@ -920,7 +922,7 @@ export function AdminPage() {
           <div style={{ display: 'grid', gridTemplateColumns: isDesktop ? 'minmax(0, 1fr) minmax(320px, 0.8fr)' : '1fr', gap: '1rem' }}>
             <div style={{ display: 'grid', gap: '0.75rem' }}>
               {notices.map((notice) => (
-                <article key={notice.id} style={{ border: '1px solid var(--color-border)', borderRadius: 18, padding: '0.9rem 1rem', background: '#fff' }}>
+                <article key={notice.id} style={{ border: '1px solid var(--color-border)', borderRadius: 14, padding: '0.9rem 1rem', background: '#fff' }}>
                   {notice.text}
                 </article>
               ))}
@@ -933,7 +935,7 @@ export function AdminPage() {
                 placeholder="Digite um aviso para o time..."
                 style={{ ...selectStyle, resize: 'vertical', lineHeight: 1.45 }}
               />
-              <button type="button" onClick={sendNotice} style={{ border: 'none', borderRadius: 16, padding: '0.95rem 1rem', background: 'var(--color-primary)', color: '#fff', fontWeight: 800 }}>
+              <button type="button" onClick={sendNotice} style={{ border: 'none', borderRadius: 12, padding: '0.95rem 1rem', background: 'var(--color-primary)', color: '#fff', fontWeight: 800 }}>
                 Enviar aviso
               </button>
             </div>
@@ -992,7 +994,7 @@ export function AdminPage() {
                   style={{
                     width: 'min(560px, 100%)',
                     background: '#fff',
-                    borderRadius: 24,
+                    borderRadius: 18,
                     boxShadow: 'var(--shadow-lg)',
                     padding: '1.25rem',
                     display: 'grid',
@@ -1040,7 +1042,7 @@ export function AdminPage() {
                     <div
                       style={{
                         border: '1px solid var(--color-border)',
-                        borderRadius: 16,
+                        borderRadius: 12,
                         padding: '0.85rem',
                         background: 'rgba(0, 164, 183, 0.08)',
                         color: 'var(--color-primary)',
@@ -1070,7 +1072,7 @@ export function AdminPage() {
                           disabled={!specialtyToAdd}
                           style={{
                             border: 'none',
-                            borderRadius: 14,
+                            borderRadius: 10,
                             padding: '0.75rem 0.95rem',
                             background: specialtyToAdd ? 'var(--color-primary)' : 'rgba(0, 49, 80, 0.12)',
                             color: specialtyToAdd ? '#fff' : 'var(--color-text-soft)',
@@ -1087,7 +1089,7 @@ export function AdminPage() {
                             key={specialty.id}
                             style={{
                               border: '1px solid var(--color-border)',
-                              borderRadius: 16,
+                              borderRadius: 12,
                               padding: '0.75rem',
                               display: 'grid',
                               gridTemplateColumns: isMobile ? '1fr' : 'minmax(0, 1fr) 140px auto',
@@ -1109,7 +1111,7 @@ export function AdminPage() {
                               onClick={() => removeSpecialtyFromEdit(specialty.id)}
                               style={{
                                 border: 'none',
-                                borderRadius: 12,
+                                borderRadius: 9,
                                 padding: '0.55rem 0.7rem',
                                 background: 'rgba(181, 31, 31, 0.1)',
                                 color: 'var(--color-secondary)',
@@ -1133,7 +1135,7 @@ export function AdminPage() {
                     onClick={submitUserEditor}
                     style={{
                       border: 'none',
-                      borderRadius: 16,
+                      borderRadius: 12,
                       padding: '0.9rem 1rem',
                       background: 'var(--color-primary)',
                       color: '#fff',
@@ -1163,7 +1165,7 @@ export function AdminPage() {
                 onClick={handleCreateArea}
                 style={{
                   border: 'none',
-                  borderRadius: '14px',
+                  borderRadius: '10px',
                   padding: '0.75rem 0.95rem',
                   background: 'var(--color-primary)',
                   color: '#fff',
@@ -1193,7 +1195,7 @@ export function AdminPage() {
                   style={{
                     width: 'min(520px, 100%)',
                     background: '#fff',
-                    borderRadius: 24,
+                    borderRadius: 18,
                     boxShadow: 'var(--shadow-lg)',
                     padding: '1.25rem',
                     display: 'grid',
@@ -1245,7 +1247,7 @@ export function AdminPage() {
                     onClick={submitAreaEditor}
                     style={{
                       border: 'none',
-                      borderRadius: 16,
+                      borderRadius: 12,
                       padding: '0.9rem 1rem',
                       background: 'var(--color-primary)',
                       color: '#fff',
@@ -1377,7 +1379,7 @@ export function AdminPage() {
               onClick={() => removeAiContent(row.id)}
               style={{
                 border: 'none',
-                borderRadius: 12,
+                borderRadius: 9,
                 padding: '0.55rem 0.7rem',
                 background: 'rgba(181, 31, 31, 0.1)',
                 color: 'var(--color-secondary)',
@@ -1437,7 +1439,7 @@ export function AdminPage() {
                 type="submit"
                 style={{
                   border: 'none',
-                  borderRadius: 16,
+                  borderRadius: 12,
                   padding: '0.9rem 1rem',
                   background: 'var(--color-primary)',
                   color: '#fff',
@@ -1468,7 +1470,7 @@ export function AdminPage() {
                 type="submit"
                 style={{
                   border: 'none',
-                  borderRadius: 16,
+                  borderRadius: 12,
                   padding: '0.85rem 1rem',
                   background: 'var(--color-primary)',
                   color: '#fff',
@@ -1486,7 +1488,7 @@ export function AdminPage() {
                 key={`${rule}-${index}`}
                 style={{
                   border: '1px solid var(--color-border)',
-                  borderRadius: 16,
+                  borderRadius: 12,
                   padding: '0.85rem 0.9rem',
                   background: '#fff',
                   display: 'flex',
@@ -1503,7 +1505,7 @@ export function AdminPage() {
                   onClick={() => setAiGuardrails((current) => current.filter((_, itemIndex) => itemIndex !== index))}
                   style={{
                     border: 'none',
-                    borderRadius: 12,
+                    borderRadius: 9,
                     padding: '0.45rem 0.65rem',
                     background: 'rgba(181, 31, 31, 0.1)',
                     color: 'var(--color-secondary)',
@@ -1563,7 +1565,7 @@ export function AdminPage() {
                 key={item.label}
                 style={{
                   border: '1px solid var(--color-border)',
-                  borderRadius: 18,
+                  borderRadius: 14,
                   padding: '1rem',
                   background: '#f8fbfc',
                   display: 'grid',
@@ -1581,7 +1583,7 @@ export function AdminPage() {
               role="alert"
               style={{
                 border: '1px solid rgba(216, 137, 28, 0.32)',
-                borderRadius: 16,
+                borderRadius: 12,
                 padding: '0.85rem 1rem',
                 background: 'rgba(216, 137, 28, 0.08)',
                 color: '#7a4a08',
@@ -1608,7 +1610,7 @@ export function AdminPage() {
                 key={item.id}
                 style={{
                   border: `1px solid ${isEnabled ? `${item.color}55` : 'var(--color-border)'}`,
-                  borderRadius: 22,
+                  borderRadius: 16,
                   padding: '1.1rem',
                   background: isEnabled ? `${item.color}0f` : '#fff',
                   display: 'grid',
@@ -1623,7 +1625,7 @@ export function AdminPage() {
                       style={{
                         width: 52,
                         height: 52,
-                        borderRadius: 16,
+                        borderRadius: 12,
                         display: 'grid',
                         placeItems: 'center',
                         background: item.color,
@@ -1709,7 +1711,7 @@ export function AdminPage() {
                     type="button"
                     onClick={() => {
                       if (item.id === 'whatsapp') {
-                        navigate('/admin/whatsapp');
+                        setWhatsappConfigModal(true);
                         return;
                       }
 
@@ -1717,7 +1719,7 @@ export function AdminPage() {
                     }}
                     style={{
                       border: `1px solid ${item.color}44`,
-                      borderRadius: 14,
+                      borderRadius: 10,
                       padding: '0.65rem 0.8rem',
                       background: '#fff',
                       color: item.color,
@@ -1732,6 +1734,10 @@ export function AdminPage() {
           })}
         </div>
 
+        {whatsappConfigModal && (
+          <WhatsappConfigModal onClose={() => setWhatsappConfigModal(false)} />
+        )}
+
         {configurationModal ? (
           <div
             role="dialog"
@@ -1752,7 +1758,7 @@ export function AdminPage() {
               onClick={(event) => event.stopPropagation()}
               style={{
                 width: 'min(460px, 100%)',
-                borderRadius: 22,
+                borderRadius: 16,
                 border: '1px solid var(--color-border)',
                 background: '#fff',
                 padding: '1.25rem',
@@ -1767,7 +1773,7 @@ export function AdminPage() {
                   style={{
                     width: 44,
                     height: 44,
-                    borderRadius: 14,
+                    borderRadius: 10,
                     display: 'grid',
                     placeItems: 'center',
                     background: configurationModal.color,
@@ -1797,7 +1803,7 @@ export function AdminPage() {
                   onClick={() => setConfigurationModal(null)}
                   style={{
                     border: 'none',
-                    borderRadius: 14,
+                    borderRadius: 10,
                     padding: '0.75rem 0.95rem',
                     background: 'var(--color-primary)',
                     color: '#fff',
@@ -1817,7 +1823,7 @@ export function AdminPage() {
   function renderPlaceholder(title, description) {
     return (
       <DataPanel title={title} description={description}>
-        <div style={{ border: '1px solid var(--color-border)', borderRadius: 18, padding: '1rem', background: '#fff', color: 'var(--color-text-soft)', fontWeight: 700 }}>
+        <div style={{ border: '1px solid var(--color-border)', borderRadius: 14, padding: '1rem', background: '#fff', color: 'var(--color-text-soft)', fontWeight: 700 }}>
           Seção em preparação.
         </div>
       </DataPanel>
@@ -1843,7 +1849,7 @@ export function AdminPage() {
             <div
               style={{
                 border: '1px solid var(--color-border)',
-                borderRadius: 18,
+                borderRadius: 14,
                 padding: '1rem',
                 background: '#f8fbfc',
                 display: 'grid',
@@ -1856,7 +1862,7 @@ export function AdminPage() {
             <div
               style={{
                 border: '1px solid var(--color-border)',
-                borderRadius: 18,
+                borderRadius: 14,
                 padding: '1rem',
                 background: '#f8fbfc',
                 display: 'grid',
@@ -1884,7 +1890,7 @@ export function AdminPage() {
                 key={item.id}
                 style={{
                   border: `1px solid ${isEnabled ? `${item.color}55` : 'var(--color-border)'}`,
-                  borderRadius: 22,
+                  borderRadius: 16,
                   padding: '1.1rem',
                   background: isEnabled ? `${item.color}0f` : '#fff',
                   display: 'grid',
@@ -1899,7 +1905,7 @@ export function AdminPage() {
                       style={{
                         width: 52,
                         height: 52,
-                        borderRadius: 16,
+                        borderRadius: 12,
                         display: 'grid',
                         placeItems: 'center',
                         background: item.color,
@@ -1988,7 +1994,7 @@ export function AdminPage() {
                     onClick={() => setAuthConfigModal(item)}
                     style={{
                       border: `1px solid ${item.color}44`,
-                      borderRadius: 14,
+                      borderRadius: 10,
                       padding: '0.65rem 0.8rem',
                       background: '#fff',
                       color: item.color,
@@ -2023,7 +2029,7 @@ export function AdminPage() {
               onClick={(event) => event.stopPropagation()}
               style={{
                 width: 'min(460px, 100%)',
-                borderRadius: 22,
+                borderRadius: 16,
                 border: '1px solid var(--color-border)',
                 background: '#fff',
                 padding: '1.25rem',
@@ -2044,7 +2050,7 @@ export function AdminPage() {
                   onClick={() => setAuthConfigModal(null)}
                   style={{
                     border: 'none',
-                    borderRadius: 14,
+                    borderRadius: 10,
                     padding: '0.75rem 0.95rem',
                     background: 'var(--color-primary)',
                     color: '#fff',
@@ -2104,6 +2110,8 @@ export function AdminPage() {
               ? 'Conteúdos da IA'
             : activeAdminSection === 'knowledge'
               ? 'Fluxo do Bot'
+              : activeAdminSection === 'templates'
+                ? 'Templates HSM'
                 : 'Painel administrativo';
 
   const pageSubtitle = activeAdminSection === 'home'
@@ -2126,6 +2134,8 @@ export function AdminPage() {
               ? 'Base de documentos que será consultada pela IA em fase de testes.'
             : activeAdminSection === 'knowledge'
               ? 'Árvore de decisão configurável para roteamento do Agente Virtual Sothis.'
+              : activeAdminSection === 'templates'
+                ? 'Modelos de mensagens predefinidas e aprovados pela Meta para iniciar conversas.'
                 : 'Controle operacional e configurações administrativas.';
 
   return (

src/modules/management/pages/SupervisorPage.jsx

@@ -51,7 +51,7 @@ export function SupervisorPage() {
   function renderPlaceholder(title, description) {
     return (
       <DataPanel title={title} description={description}>
-        <div style={{ border: '1px solid var(--color-border)', borderRadius: 18, padding: '1rem', background: '#fff', color: 'var(--color-text-soft)', fontWeight: 700 }}>
+        <div style={{ border: '1px solid var(--color-border)', borderRadius: 14, padding: '1rem', background: '#fff', color: 'var(--color-text-soft)', fontWeight: 700 }}>
           Secao em preparacao.
         </div>
       </DataPanel>

src/modules/management/services/templateService.js

@@ -25,14 +25,14 @@ export function updateTemplate(id, payload) {
   });
 }
 
-export function approveTemplateByAdmin(id) {
+export function submitTemplateToMeta(id) {
-  return request(`/whatsapp/templates/approve-admin/${id}`, {
+  return request(`/whatsapp/templates/${id}/submit-meta`, {
     method: 'POST',
   });
 }
 
-export function rejectTemplateByAdmin(id) {
+export function syncTemplatesFromMeta() {
-  return request(`/whatsapp/templates/reject-admin/${id}`, {
+  return request('/whatsapp/templates/sync-meta', {
     method: 'POST',
   });
 }

src/modules/management/services/whatsappConfigService.js

@@ -0,0 +1,30 @@
+import { apiRequest } from '../../../shared/services/apiClient';
+
+export async function getWhatsappConfig() {
+  return apiRequest('/admin/whatsapp-config', {
+    fallbackMessage: 'Falha ao carregar configuração do WhatsApp',
+  });
+}
+
+export async function saveWhatsappConfig(fields) {
+  const body = {};
+  if (fields.access_token) body.access_token = fields.access_token;
+  if (fields.phone_number_id) body.phone_number_id = fields.phone_number_id;
+  if (fields.api_version) body.api_version = fields.api_version;
+  if (fields.webhook_token) body.webhook_token = fields.webhook_token;
+  if (fields.waba_id) body.waba_id = fields.waba_id;
+
+  return apiRequest('/admin/whatsapp-config', {
+    method: 'PUT',
+    body: JSON.stringify(body),
+    fallbackMessage: 'Falha ao salvar configuração do WhatsApp',
+  });
+}
+
+export async function validateWhatsappConfig({ access_token, phone_number_id, api_version }) {
+  return apiRequest('/admin/whatsapp-config/validate', {
+    method: 'POST',
+    body: JSON.stringify({ access_token, phone_number_id, api_version }),
+    fallbackMessage: 'Falha ao validar credenciais',
+  });
+}