From 821ae591d4dcc7a0161acaa042fa51bb079be1d8 Mon Sep 17 00:00:00 2001
From: VPS 4 Builder <deploy@clube67.com>
Date: Thu, 2 Jul 2026 00:42:34 +0200
Subject: [PATCH] =?UTF-8?q?style(newwhats):=20tema=20branco/profissional?=
 =?UTF-8?q?=20na=20Secret=C3=A1ria=20(/wa-secretaria)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Converte a SecretariaView do dark para o tema claro do scoreodonto
(bg-gray-50/white, text-gray-*, border-gray-*), preservando botões brand,
backdrops de modal e acentos.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/views/newwhats/SecretariaView.tsx | 350 ++++++++++-----------
 1 file changed, 175 insertions(+), 175 deletions(-)

diff --git a/frontend/views/newwhats/SecretariaView.tsx b/frontend/views/newwhats/SecretariaView.tsx
index 36842d9..2b54bfc 100644
--- a/frontend/views/newwhats/SecretariaView.tsx
+++ b/frontend/views/newwhats/SecretariaView.tsx
@@ -27,12 +27,12 @@ const NAV_ITEMS: { id: NavTab; icon: React.ElementType; label: string }[] = [
 
 function ThinNav({ active, onChange, onHelp, onBack }: { active: NavTab; onChange: (t: NavTab) => void; onHelp: () => void; onBack?: () => void }) {
   return (
-    <div className="w-[60px] h-full bg-[#0c0e14] border-r border-white/5 flex flex-col items-center py-4 shrink-0 z-30 gap-1">
+    <div className="w-[60px] h-full bg-white border-r border-gray-100 flex flex-col items-center py-4 shrink-0 z-30 gap-1">
       {onBack && (
         <button
           title="Voltar ao scoreodonto"
           onClick={onBack}
-          className="w-10 h-10 rounded-xl flex items-center justify-center text-slate-500 hover:text-white hover:bg-white/5 transition-all mb-2"
+          className="w-10 h-10 rounded-xl flex items-center justify-center text-gray-500 hover:text-gray-800 hover:bg-gray-50 transition-all mb-2"
         >
           <ArrowLeft size={20} />
         </button>
@@ -44,8 +44,8 @@ function ThinNav({ active, onChange, onHelp, onBack }: { active: NavTab; onChang
           onClick={() => onChange(id)}
           className={`w-10 h-10 rounded-xl flex items-center justify-center transition-all ${
             active === id
-              ? 'bg-brand-500/20 text-brand-400'
-              : 'text-slate-600 hover:text-slate-400 hover:bg-white/5'
+              ? 'bg-brand-500/20 text-brand-600'
+              : 'text-gray-500 hover:text-gray-600 hover:bg-gray-50'
           }`}
         >
           <Icon size={20} />
@@ -58,7 +58,7 @@ function ThinNav({ active, onChange, onHelp, onBack }: { active: NavTab; onChang
       <button
         title="Ajuda — como usar"
         onClick={onHelp}
-        className="w-10 h-10 rounded-xl flex items-center justify-center text-slate-600 hover:text-brand-400 hover:bg-white/5 transition-all"
+        className="w-10 h-10 rounded-xl flex items-center justify-center text-gray-500 hover:text-brand-600 hover:bg-gray-50 transition-all"
       >
         <HelpCircle size={20} />
       </button>
@@ -84,15 +84,15 @@ function AgentDropdown({
     <div className="relative" ref={ref}>
       <button
         onClick={() => setOpen((o) => !o)}
-        className="w-full flex items-center gap-2 px-3 py-2.5 text-left hover:bg-white/[0.04] transition-colors"
+        className="w-full flex items-center gap-2 px-3 py-2.5 text-left hover:bg-gray-100 transition-colors"
       >
         <div className="w-7 h-7 rounded-lg bg-brand-500/20 flex items-center justify-center shrink-0">
-          <Bot size={14} className="text-brand-400" />
+          <Bot size={14} className="text-brand-600" />
         </div>
-        <span className="flex-1 text-sm font-semibold text-white truncate">
+        <span className="flex-1 text-sm font-semibold text-gray-800 truncate">
           {selected?.name ?? 'Selecionar agente'}
         </span>
-        <ChevronDown size={14} className={`text-slate-500 shrink-0 transition-transform ${open ? 'rotate-180' : ''}`} />
+        <ChevronDown size={14} className={`text-gray-500 shrink-0 transition-transform ${open ? 'rotate-180' : ''}`} />
       </button>
 
       <AnimatePresence>
@@ -102,17 +102,17 @@ function AgentDropdown({
             animate={{ opacity: 1, y: 0 }}
             exit={{ opacity: 0, y: -6 }}
             transition={{ duration: 0.12 }}
-            className="absolute left-2 right-2 top-full mt-1 bg-[#12151e] border border-white/10 rounded-xl shadow-2xl z-50 overflow-hidden"
+            className="absolute left-2 right-2 top-full mt-1 bg-gray-50 border border-gray-200 rounded-xl shadow-2xl z-50 overflow-hidden"
           >
             {agents.map((a) => (
               <button key={a.id} onClick={() => { onChange(a); setOpen(false) }}
                 className={`w-full flex items-center gap-2 px-3 py-2.5 text-sm transition-colors text-left ${
-                  selected?.id === a.id ? 'bg-brand-500/10 text-brand-300' : 'text-slate-300 hover:bg-white/5'
+                  selected?.id === a.id ? 'bg-brand-500/10 text-brand-300' : 'text-gray-700 hover:bg-gray-50'
                 }`}
               >
-                <Bot size={14} className={selected?.id === a.id ? 'text-brand-400' : 'text-slate-500'} />
+                <Bot size={14} className={selected?.id === a.id ? 'text-brand-600' : 'text-gray-500'} />
                 <span className="flex-1 truncate">{a.name}</span>
-                {selected?.id === a.id && <Check size={13} className="text-brand-400" />}
+                {selected?.id === a.id && <Check size={13} className="text-brand-600" />}
               </button>
             ))}
           </motion.div>
@@ -126,7 +126,7 @@ function AgentDropdown({
 
 const STATUS_META = {
   active:    { label: 'Ativa',     color: 'text-green-400',  dot: 'bg-green-400' },
-  closed:    { label: 'Encerrada', color: 'text-slate-500',  dot: 'bg-slate-600' },
+  closed:    { label: 'Encerrada', color: 'text-gray-500',  dot: 'bg-gray-400' },
   escalated: { label: 'Escalada',  color: 'text-yellow-400', dot: 'bg-yellow-400' },
 }
 
@@ -144,14 +144,14 @@ function ConversationList({
   return (
     <div className="flex-1 overflow-y-auto">
       <div className="px-3 py-2 flex items-center justify-between">
-        <span className="text-[10px] font-black text-slate-600 uppercase tracking-widest">
+        <span className="text-[10px] font-black text-gray-500 uppercase tracking-widest">
           Sessões de Teste
         </span>
         <button
           onClick={onCreate}
           disabled={!selectedAgent}
           title="Nova sessão de teste"
-          className="w-6 h-6 rounded-lg bg-white/5 hover:bg-brand-500/20 text-slate-500 hover:text-brand-400 flex items-center justify-center transition-all disabled:opacity-30"
+          className="w-6 h-6 rounded-lg bg-gray-50 hover:bg-brand-500/20 text-gray-500 hover:text-brand-600 flex items-center justify-center transition-all disabled:opacity-30"
         >
           <Plus size={13} />
         </button>
@@ -159,10 +159,10 @@ function ConversationList({
 
       {loadingConversations ? (
         <div className="flex items-center justify-center py-10">
-          <Loader2 size={20} className="animate-spin text-slate-600" />
+          <Loader2 size={20} className="animate-spin text-gray-500" />
         </div>
       ) : conversations.length === 0 ? (
-        <p className="text-xs text-slate-700 text-center py-8 px-4">
+        <p className="text-xs text-gray-400 text-center py-8 px-4">
           {selectedAgent ? 'Nenhuma sessão. Clique em + para iniciar.' : 'Selecione um agente.'}
         </p>
       ) : (
@@ -173,28 +173,28 @@ function ConversationList({
             return (
               <div key={c.id}
                 className={`group flex items-center gap-2 px-2 py-3 rounded-xl cursor-pointer transition-all relative ${
-                  isActive ? 'bg-brand-500/10 border border-brand-500/15' : 'hover:bg-white/[0.03]'
+                  isActive ? 'bg-brand-500/10 border border-brand-500/15' : 'hover:bg-gray-100'
                 }`}
                 onClick={() => onSelect(c)}
               >
-                <div className="w-8 h-8 rounded-full bg-white/5 flex items-center justify-center shrink-0">
-                  <User size={14} className="text-slate-500" />
+                <div className="w-8 h-8 rounded-full bg-gray-50 flex items-center justify-center shrink-0">
+                  <User size={14} className="text-gray-500" />
                 </div>
                 <div className="flex-1 min-w-0">
-                  <p className={`text-sm font-semibold truncate ${isActive ? 'text-brand-300' : 'text-slate-300'}`}>
+                  <p className={`text-sm font-semibold truncate ${isActive ? 'text-brand-300' : 'text-gray-700'}`}>
                     {c.contact_name}
                   </p>
                   <div className="flex items-center gap-1.5 mt-0.5">
                     <span className={`w-1.5 h-1.5 rounded-full ${m.dot}`} />
                     <span className={`text-[10px] font-medium ${m.color}`}>{m.label}</span>
-                    <span className="text-[10px] text-slate-700 ml-1">
+                    <span className="text-[10px] text-gray-400 ml-1">
                       {format(parseISO(c.updated_at), "dd/MM HH:mm", { locale: ptBR })}
                     </span>
                   </div>
                 </div>
                 <button
                   onClick={(e) => { e.stopPropagation(); onDelete(c.id) }}
-                  className="opacity-0 group-hover:opacity-100 w-5 h-5 rounded flex items-center justify-center text-slate-600 hover:text-red-400 transition-all"
+                  className="opacity-0 group-hover:opacity-100 w-5 h-5 rounded flex items-center justify-center text-gray-500 hover:text-red-400 transition-all"
                 >
                   <Trash2 size={11} />
                 </button>
@@ -292,7 +292,7 @@ function BrainPanel({
   return (
     <div className="flex-1 overflow-y-auto">
       <div className="px-3 py-2 flex items-center justify-between">
-        <span className="text-[10px] font-black text-slate-600 uppercase tracking-widest">
+        <span className="text-[10px] font-black text-gray-500 uppercase tracking-widest">
           Nós do Cérebro
         </span>
         <div className="relative">
@@ -300,7 +300,7 @@ function BrainPanel({
             onClick={() => setShowAddMenu((o) => !o)}
             disabled={!selectedAgent}
             title="Adicionar nó"
-            className="w-6 h-6 rounded-lg bg-white/5 hover:bg-brand-500/20 text-slate-500 hover:text-brand-400 flex items-center justify-center transition-all disabled:opacity-30"
+            className="w-6 h-6 rounded-lg bg-gray-50 hover:bg-brand-500/20 text-gray-500 hover:text-brand-600 flex items-center justify-center transition-all disabled:opacity-30"
           >
             <Plus size={13} />
           </button>
@@ -310,14 +310,14 @@ function BrainPanel({
                 initial={{ opacity: 0, y: -4 }}
                 animate={{ opacity: 1, y: 0 }}
                 exit={{ opacity: 0, y: -4 }}
-                className="absolute right-0 top-full mt-1 bg-[#12151e] border border-white/10 rounded-xl shadow-2xl z-50 overflow-hidden w-40"
+                className="absolute right-0 top-full mt-1 bg-gray-50 border border-gray-200 rounded-xl shadow-2xl z-50 overflow-hidden w-40"
               >
                 {(Object.keys(NODE_META) as BrainNodeType[]).map((type) => {
                   const m = NODE_META[type]
                   const Icon = m.icon
                   return (
                     <button key={type} onClick={() => { onAdd(type); setShowAddMenu(false) }}
-                      className="w-full flex items-center gap-2 px-3 py-2 text-xs text-slate-300 hover:bg-white/5 transition-colors"
+                      className="w-full flex items-center gap-2 px-3 py-2 text-xs text-gray-700 hover:bg-gray-50 transition-colors"
                     >
                       <Icon size={13} className={m.color} />
                       {m.label}
@@ -332,10 +332,10 @@ function BrainPanel({
 
       {loadingNodes ? (
         <div className="flex items-center justify-center py-10">
-          <Loader2 size={20} className="animate-spin text-slate-600" />
+          <Loader2 size={20} className="animate-spin text-gray-500" />
         </div>
       ) : nodes.length === 0 ? (
-        <p className="text-xs text-slate-700 text-center py-8 px-4">
+        <p className="text-xs text-gray-400 text-center py-8 px-4">
           {selectedAgent ? 'Nenhum nó. Clique em + para adicionar.' : 'Selecione um agente.'}
         </p>
       ) : (
@@ -354,8 +354,8 @@ function BrainPanel({
                   isOpen
                     ? 'border-brand-500/40 bg-brand-500/5'
                     : node.active
-                      ? 'border-white/8 bg-white/[0.02]'
-                      : 'border-white/4 bg-white/[0.01] opacity-50'
+                      ? 'border-gray-200 bg-gray-50'
+                      : 'border-gray-100 bg-gray-50 opacity-50'
                 }`}
               >
                 {/* Node Header */}
@@ -368,10 +368,10 @@ function BrainPanel({
                       <input
                         value={editTitle}
                         onChange={(e) => setEditTitle(e.target.value)}
-                        className="w-full text-xs font-bold bg-transparent text-white border-b border-white/20 focus:outline-none"
+                        className="w-full text-xs font-bold bg-transparent text-gray-800 border-b border-gray-300 focus:outline-none"
                       />
                     ) : (
-                      <p className="text-xs font-bold text-slate-300 truncate">{node.title}</p>
+                      <p className="text-xs font-bold text-gray-700 truncate">{node.title}</p>
                     )}
                     <p className={`text-[10px] font-medium ${m.color}`}>{m.label}</p>
                   </div>
@@ -381,17 +381,17 @@ function BrainPanel({
                       onClick={() => onOpen(node)}
                       title="Abrir editor"
                       className={`w-5 h-5 flex items-center justify-center transition-colors ${
-                        isOpen ? 'text-brand-400' : 'text-slate-600 hover:text-brand-400'
+                        isOpen ? 'text-brand-600' : 'text-gray-500 hover:text-brand-600'
                       }`}
                     >
                       <Maximize2 size={11} />
                     </button>
                     {/* Toggle active */}
                     <button onClick={() => onUpdate(node.id, { active: !node.active })}
-                      className="w-5 h-5 flex items-center justify-center text-slate-600 hover:text-slate-400 transition-colors"
+                      className="w-5 h-5 flex items-center justify-center text-gray-500 hover:text-gray-600 transition-colors"
                     >
                       {node.active
-                        ? <ToggleRight size={16} className="text-brand-400" />
+                        ? <ToggleRight size={16} className="text-brand-600" />
                         : <ToggleLeft size={16} />}
                     </button>
                     {isEditing ? (
@@ -399,16 +399,16 @@ function BrainPanel({
                         <button onClick={() => saveEdit(node)} className="w-5 h-5 flex items-center justify-center text-green-400 hover:text-green-300">
                           <Check size={12} />
                         </button>
-                        <button onClick={() => setEditingId(null)} className="w-5 h-5 flex items-center justify-center text-slate-600 hover:text-slate-400">
+                        <button onClick={() => setEditingId(null)} className="w-5 h-5 flex items-center justify-center text-gray-500 hover:text-gray-600">
                           <X size={12} />
                         </button>
                       </>
                     ) : (
                       <>
-                        <button onClick={() => startEdit(node)} className="w-5 h-5 flex items-center justify-center text-slate-600 hover:text-slate-400 transition-colors">
+                        <button onClick={() => startEdit(node)} className="w-5 h-5 flex items-center justify-center text-gray-500 hover:text-gray-600 transition-colors">
                           <Pencil size={11} />
                         </button>
-                        <button onClick={() => onDelete(node.id)} className="w-5 h-5 flex items-center justify-center text-slate-700 hover:text-red-400 transition-colors">
+                        <button onClick={() => onDelete(node.id)} className="w-5 h-5 flex items-center justify-center text-gray-400 hover:text-red-400 transition-colors">
                           <Trash2 size={11} />
                         </button>
                       </>
@@ -424,7 +424,7 @@ function BrainPanel({
                       className={`flex items-center gap-1.5 px-2 py-1 rounded-lg text-[10px] font-semibold transition-all ${
                         hasModel
                           ? 'bg-brand-500/15 text-brand-300 border border-brand-500/20'
-                          : 'bg-white/5 text-slate-600 border border-white/5 hover:text-slate-400'
+                          : 'bg-gray-50 text-gray-500 border border-gray-100 hover:text-gray-600'
                       }`}
                     >
                       <Cpu size={10} />
@@ -438,21 +438,21 @@ function BrainPanel({
                           initial={{ opacity: 0, y: -4 }}
                           animate={{ opacity: 1, y: 0 }}
                           exit={{ opacity: 0, y: -4 }}
-                          className="absolute left-3 top-full mt-1 bg-[#12151e] border border-white/10 rounded-xl shadow-2xl z-50 overflow-hidden w-56"
+                          className="absolute left-3 top-full mt-1 bg-gray-50 border border-gray-200 rounded-xl shadow-2xl z-50 overflow-hidden w-56"
                         >
                           {/* Opção: usar padrão do agente */}
                           <button
                             onClick={() => { onUpdate(node.id, { node_model: null }); setModelPickerFor(null) }}
                             className={`w-full flex items-center gap-2 px-3 py-2 text-xs transition-colors text-left ${
-                              !node.node_model ? 'text-brand-300 bg-brand-500/10' : 'text-slate-400 hover:bg-white/5'
+                              !node.node_model ? 'text-brand-300 bg-brand-500/10' : 'text-gray-600 hover:bg-gray-50'
                             }`}
                           >
                             <span className="w-4 h-4 flex items-center justify-center shrink-0">
-                              {!node.node_model && <Check size={11} className="text-brand-400" />}
+                              {!node.node_model && <Check size={11} className="text-brand-600" />}
                             </span>
                             <span>Padrão do agente</span>
                           </button>
-                          <div className="border-t border-white/5 my-0.5" />
+                          <div className="border-t border-gray-100 my-0.5" />
                           {providerModels.map((mdl) => (
                             <button
                               key={mdl.value}
@@ -460,11 +460,11 @@ function BrainPanel({
                               className={`w-full flex items-center gap-2 px-3 py-2 text-xs transition-colors text-left ${
                                 node.node_model === mdl.value
                                   ? 'text-brand-300 bg-brand-500/10'
-                                  : 'text-slate-300 hover:bg-white/5'
+                                  : 'text-gray-700 hover:bg-gray-50'
                               }`}
                             >
                               <span className="w-4 h-4 flex items-center justify-center shrink-0">
-                                {node.node_model === mdl.value && <Check size={11} className="text-brand-400" />}
+                                {node.node_model === mdl.value && <Check size={11} className="text-brand-600" />}
                               </span>
                               {mdl.label}
                             </button>
@@ -481,10 +481,10 @@ function BrainPanel({
                     value={editContent}
                     onChange={(e) => setEditContent(e.target.value)}
                     rows={5}
-                    className="w-full text-xs text-slate-400 bg-black/20 border-t border-white/5 px-3 py-2 focus:outline-none focus:bg-black/30 resize-none font-mono leading-relaxed"
+                    className="w-full text-xs text-gray-600 bg-gray-50 border-t border-gray-100 px-3 py-2 focus:outline-none focus:bg-gray-50 resize-none font-mono leading-relaxed"
                   />
                 ) : (
-                  <p className="px-3 pb-2.5 text-[11px] text-slate-600 font-mono leading-relaxed line-clamp-3">
+                  <p className="px-3 pb-2.5 text-[11px] text-gray-500 font-mono leading-relaxed line-clamp-3">
                     {node.content}
                   </p>
                 )}
@@ -502,7 +502,7 @@ function BrainPanel({
 const SLOT_STATUS: Record<CalendarSlot['status'], { label: string; color: string; dot: string }> = {
   available: { label: 'Disponível', color: 'text-green-400', dot: 'bg-green-400' },
   booked:    { label: 'Agendado',   color: 'text-blue-400',  dot: 'bg-blue-400' },
-  cancelled: { label: 'Cancelado',  color: 'text-slate-500', dot: 'bg-slate-600' },
+  cancelled: { label: 'Cancelado',  color: 'text-gray-500', dot: 'bg-gray-400' },
 }
 
 function CalendarPanel({
@@ -524,9 +524,9 @@ function CalendarPanel({
   return (
     <div className="flex-1 overflow-y-auto">
       <div className="px-3 py-2 flex items-center justify-between">
-        <span className="text-[10px] font-black text-slate-600 uppercase tracking-widest">Agenda</span>
+        <span className="text-[10px] font-black text-gray-500 uppercase tracking-widest">Agenda</span>
         <button onClick={onCreate}
-          className="w-6 h-6 rounded-lg bg-white/5 hover:bg-brand-500/20 text-slate-500 hover:text-brand-400 flex items-center justify-center transition-all"
+          className="w-6 h-6 rounded-lg bg-gray-50 hover:bg-brand-500/20 text-gray-500 hover:text-brand-600 flex items-center justify-center transition-all"
         >
           <Plus size={13} />
         </button>
@@ -534,13 +534,13 @@ function CalendarPanel({
 
       {loading ? (
         <div className="flex items-center justify-center py-10">
-          <Loader2 size={20} className="animate-spin text-slate-600" />
+          <Loader2 size={20} className="animate-spin text-gray-500" />
         </div>
       ) : (
         <div className="space-y-4 px-2 pb-4">
           {Object.entries(grouped).map(([date, daySlots]) => (
             <div key={date}>
-              <p className="text-[10px] font-black text-slate-600 uppercase tracking-widest px-1 mb-1.5">
+              <p className="text-[10px] font-black text-gray-500 uppercase tracking-widest px-1 mb-1.5">
                 {format(parseISO(date), "EEE, dd/MM", { locale: ptBR })}
               </p>
               <div className="space-y-1">
@@ -548,14 +548,14 @@ function CalendarPanel({
                   const m = SLOT_STATUS[slot.status]
                   return (
                     <div key={slot.id}
-                      className="flex items-center gap-2 px-2.5 py-2 rounded-lg bg-white/[0.02] border border-white/5 group"
+                      className="flex items-center gap-2 px-2.5 py-2 rounded-lg bg-gray-50 border border-gray-100 group"
                     >
                       <span className={`w-1.5 h-1.5 rounded-full shrink-0 ${m.dot}`} />
                       <div className="flex-1 min-w-0">
-                        <p className="text-xs font-semibold text-slate-300 truncate">{slot.title}</p>
+                        <p className="text-xs font-semibold text-gray-700 truncate">{slot.title}</p>
                         <div className="flex items-center gap-1.5 mt-0.5">
-                          <Clock size={9} className="text-slate-600" />
-                          <span className="text-[10px] text-slate-600">
+                          <Clock size={9} className="text-gray-500" />
+                          <span className="text-[10px] text-gray-500">
                             {slot.time_start.slice(0, 5)}–{slot.time_end.slice(0, 5)}
                           </span>
                           {slot.attendee_name && (
@@ -567,7 +567,7 @@ function CalendarPanel({
                         {slot.status === 'available' && (
                           <button onClick={() => onUpdate(slot.id, { status: 'booked' })}
                             title="Marcar como agendado"
-                            className="w-5 h-5 flex items-center justify-center text-slate-600 hover:text-blue-400 transition-colors"
+                            className="w-5 h-5 flex items-center justify-center text-gray-500 hover:text-blue-400 transition-colors"
                           >
                             <CheckCircle size={12} />
                           </button>
@@ -575,13 +575,13 @@ function CalendarPanel({
                         {slot.status === 'booked' && (
                           <button onClick={() => onUpdate(slot.id, { status: 'available' })}
                             title="Liberar horário"
-                            className="w-5 h-5 flex items-center justify-center text-slate-600 hover:text-green-400 transition-colors"
+                            className="w-5 h-5 flex items-center justify-center text-gray-500 hover:text-green-400 transition-colors"
                           >
                             <Power size={12} />
                           </button>
                         )}
                         <button onClick={() => onDelete(slot.id)}
-                          className="w-5 h-5 flex items-center justify-center text-slate-700 hover:text-red-400 transition-colors"
+                          className="w-5 h-5 flex items-center justify-center text-gray-400 hover:text-red-400 transition-colors"
                         >
                           <Trash2 size={11} />
                         </button>
@@ -619,43 +619,43 @@ function AgentsPanel({
   return (
     <div className="flex-1 overflow-y-auto">
       <div className="px-3 py-2 flex items-center justify-between">
-        <span className="text-[10px] font-black text-slate-600 uppercase tracking-widest">Agentes</span>
+        <span className="text-[10px] font-black text-gray-500 uppercase tracking-widest">Agentes</span>
         <button onClick={onCreate}
-          className="w-6 h-6 rounded-lg bg-white/5 hover:bg-brand-500/20 text-slate-500 hover:text-brand-400 flex items-center justify-center transition-all"
+          className="w-6 h-6 rounded-lg bg-gray-50 hover:bg-brand-500/20 text-gray-500 hover:text-brand-600 flex items-center justify-center transition-all"
         >
           <Plus size={13} />
         </button>
       </div>
 
       {loadingAgents ? (
-        <div className="flex items-center justify-center py-10"><Loader2 size={20} className="animate-spin text-slate-600" /></div>
+        <div className="flex items-center justify-center py-10"><Loader2 size={20} className="animate-spin text-gray-500" /></div>
       ) : (
         <div className="space-y-2 px-2 pb-4">
           {agents.map((a) => {
             const isEditing = editingId === a.id
             const isSelected = selected?.id === a.id
             return (
-              <div key={a.id} className={`rounded-xl border transition-all ${isSelected ? 'border-brand-500/20 bg-brand-500/5' : 'border-white/8 bg-white/[0.02]'}`}>
+              <div key={a.id} className={`rounded-xl border transition-all ${isSelected ? 'border-brand-500/20 bg-brand-500/5' : 'border-gray-200 bg-gray-50'}`}>
                 <div className="flex items-center gap-2 px-3 py-2.5">
                   <div className="w-7 h-7 rounded-lg bg-brand-500/15 flex items-center justify-center shrink-0">
-                    <Bot size={14} className="text-brand-400" />
+                    <Bot size={14} className="text-brand-600" />
                   </div>
                   <div className="flex-1 min-w-0 cursor-pointer" onClick={() => onSelect(a)}>
-                    <p className={`text-xs font-bold truncate ${isSelected ? 'text-brand-300' : 'text-slate-300'}`}>{a.name}</p>
-                    <p className="text-[10px] text-slate-600">{a.provider} / {a.model}</p>
+                    <p className={`text-xs font-bold truncate ${isSelected ? 'text-brand-300' : 'text-gray-700'}`}>{a.name}</p>
+                    <p className="text-[10px] text-gray-500">{a.provider} / {a.model}</p>
                   </div>
                   <div className="flex items-center gap-1">
-                    <button onClick={() => startEdit(a)} className="w-5 h-5 flex items-center justify-center text-slate-600 hover:text-slate-400">
+                    <button onClick={() => startEdit(a)} className="w-5 h-5 flex items-center justify-center text-gray-500 hover:text-gray-600">
                       <Pencil size={11} />
                     </button>
-                    <button onClick={() => onDelete(a.id)} className="w-5 h-5 flex items-center justify-center text-slate-700 hover:text-red-400">
+                    <button onClick={() => onDelete(a.id)} className="w-5 h-5 flex items-center justify-center text-gray-400 hover:text-red-400">
                       <Trash2 size={11} />
                     </button>
                   </div>
                 </div>
 
                 {isEditing && (
-                  <div className="px-3 pb-3 space-y-2 border-t border-white/5 pt-2">
+                  <div className="px-3 pb-3 space-y-2 border-t border-gray-100 pt-2">
                     {[
                       { key: 'name', label: 'Nome', type: 'text' },
                       { key: 'description', label: 'Descrição', type: 'text' },
@@ -665,23 +665,23 @@ function AgentsPanel({
                       { key: 'context_window', label: 'Context Window', type: 'number' },
                     ].map(({ key, label, type }) => (
                       <div key={key}>
-                        <p className="text-[10px] text-slate-600 mb-0.5">{label}</p>
+                        <p className="text-[10px] text-gray-500 mb-0.5">{label}</p>
                         <input
                           type={type}
                           value={String((form as any)[key] ?? '')}
                           onChange={(e) => setForm((f) => ({ ...f, [key]: type === 'number' ? parseFloat(e.target.value) : e.target.value }))}
-                          className="w-full text-xs bg-black/30 text-white border border-white/10 rounded-lg px-2 py-1.5 focus:outline-none focus:border-brand-500/40"
+                          className="w-full text-xs bg-gray-50 text-gray-800 border border-gray-200 rounded-lg px-2 py-1.5 focus:outline-none focus:border-brand-500/40"
                         />
                       </div>
                     ))}
                     <div className="flex gap-2 pt-1">
                       <button onClick={() => { onUpdate(a.id, form); setEditingId(null) }}
-                        className="flex-1 py-1.5 text-xs bg-brand-500/20 text-brand-400 rounded-lg hover:bg-brand-500/30 transition-colors font-semibold"
+                        className="flex-1 py-1.5 text-xs bg-brand-500/20 text-brand-600 rounded-lg hover:bg-brand-500/30 transition-colors font-semibold"
                       >
                         Salvar
                       </button>
                       <button onClick={() => setEditingId(null)}
-                        className="py-1.5 px-3 text-xs bg-white/5 text-slate-400 rounded-lg hover:bg-white/10 transition-colors"
+                        className="py-1.5 px-3 text-xs bg-gray-50 text-gray-600 rounded-lg hover:bg-gray-100 transition-colors"
                       >
                         Cancelar
                       </button>
@@ -700,7 +700,7 @@ function AgentsPanel({
 // ─── Numbers Panel ────────────────────────────────────────────────────────────
 
 const ROLE_META: Record<NumberRole, { label: string; icon: React.ElementType; color: string; bg: string }> = {
-  secretary_virtual: { label: 'Secretária Virtual', icon: Sparkles,    color: 'text-brand-400',  bg: 'bg-brand-500/15' },
+  secretary_virtual: { label: 'Secretária Virtual', icon: Sparkles,    color: 'text-brand-600',  bg: 'bg-brand-500/15' },
   clinic:            { label: 'Clínica / Empresa',  icon: Building2,   color: 'text-blue-400',   bg: 'bg-blue-500/10' },
   doctor:            { label: 'Médico / Dr.',        icon: Stethoscope, color: 'text-green-400',  bg: 'bg-green-500/10' },
   specialist:        { label: 'Especialista',        icon: Star,        color: 'text-purple-400', bg: 'bg-purple-500/10' },
@@ -761,31 +761,31 @@ function NumbersPanel({
   const statusDot = (status: string) => {
     if (status === 'CONNECTED') return 'bg-green-400'
     if (status === 'CONNECTING') return 'bg-yellow-400 animate-pulse'
-    return 'bg-slate-600'
+    return 'bg-gray-400'
   }
 
   return (
     <div className="flex-1 overflow-y-auto">
       <div className="px-3 py-2 flex items-center justify-between">
-        <span className="text-[10px] font-black text-slate-600 uppercase tracking-widest">Instâncias / Papéis</span>
+        <span className="text-[10px] font-black text-gray-500 uppercase tracking-widest">Instâncias / Papéis</span>
         <button onClick={() => { setLoadingInst(true); import('./services/chatApiService').then(({ instanceApi }) => instanceApi.list()).then((d: any) => setInstances(Array.isArray(d) ? d : d.instances ?? [])).finally(() => setLoadingInst(false)) }}
           title="Recarregar instâncias"
-          className="w-6 h-6 rounded-lg bg-white/5 hover:bg-brand-500/20 text-slate-500 hover:text-brand-400 flex items-center justify-center transition-all"
+          className="w-6 h-6 rounded-lg bg-gray-50 hover:bg-brand-500/20 text-gray-500 hover:text-brand-600 flex items-center justify-center transition-all"
         >
           <RefreshCw size={12} className={loadingInst ? 'animate-spin' : ''} />
         </button>
       </div>
 
-      <p className="text-[10px] text-slate-700 px-3 pb-2 leading-relaxed">
+      <p className="text-[10px] text-gray-400 px-3 pb-2 leading-relaxed">
         Atribua um papel a cada instância WhatsApp. A secretária usa isso para saber para qual número enviar consultas internas.
       </p>
 
       {(loading || loadingInst) ? (
         <div className="flex items-center justify-center py-10">
-          <Loader2 size={20} className="animate-spin text-slate-600" />
+          <Loader2 size={20} className="animate-spin text-gray-500" />
         </div>
       ) : instances.length === 0 ? (
-        <p className="text-xs text-slate-700 text-center py-8 px-4">
+        <p className="text-xs text-gray-400 text-center py-8 px-4">
           Nenhuma instância WhatsApp encontrada. Crie instâncias na tela principal.
         </p>
       ) : (
@@ -801,29 +801,29 @@ function NumbersPanel({
               <div key={inst.id}
                 className={`rounded-xl border transition-all ${
                   num?.active === false
-                    ? 'border-white/4 bg-white/[0.01] opacity-50'
-                    : 'border-white/8 bg-white/[0.02]'
+                    ? 'border-gray-100 bg-gray-50 opacity-50'
+                    : 'border-gray-200 bg-gray-50'
                 }`}
               >
                 <div className="flex items-center gap-2 px-3 py-2.5">
                   {/* Status dot + ícone */}
                   <div className="relative shrink-0">
-                    <div className={`w-7 h-7 rounded-lg flex items-center justify-center ${m?.bg ?? 'bg-white/5'}`}>
-                      <Icon size={13} className={m?.color ?? 'text-slate-600'} />
+                    <div className={`w-7 h-7 rounded-lg flex items-center justify-center ${m?.bg ?? 'bg-gray-50'}`}>
+                      <Icon size={13} className={m?.color ?? 'text-gray-500'} />
                     </div>
-                    <span className={`absolute -bottom-0.5 -right-0.5 w-2.5 h-2.5 rounded-full border border-[#0a0d15] ${statusDot(inst.status)}`} />
+                    <span className={`absolute -bottom-0.5 -right-0.5 w-2.5 h-2.5 rounded-full border border-white ${statusDot(inst.status)}`} />
                   </div>
 
                   {/* Info */}
                   <div className="flex-1 min-w-0">
-                    <p className="text-xs font-bold text-slate-300 truncate">{inst.name}</p>
+                    <p className="text-xs font-bold text-gray-700 truncate">{inst.name}</p>
                     <div className="flex items-center gap-1.5 mt-0.5">
                       {m ? (
                         <span className={`text-[10px] font-semibold ${m.color}`}>{m.label}</span>
                       ) : (
-                        <span className="text-[10px] text-slate-700 italic">sem papel atribuído</span>
+                        <span className="text-[10px] text-gray-400 italic">sem papel atribuído</span>
                       )}
-                      {num?.area && <span className="text-[10px] text-slate-700">· {num.area}</span>}
+                      {num?.area && <span className="text-[10px] text-gray-400">· {num.area}</span>}
                     </div>
                   </div>
 
@@ -833,7 +833,7 @@ function NumbersPanel({
                     <button
                       onClick={() => setRolePickerFor(rolePickerFor === inst.id ? null : inst.id)}
                       className={`flex items-center gap-1 px-2 py-1 rounded-lg text-[10px] font-semibold transition-all ${
-                        m ? `${m.bg} ${m.color}` : 'bg-white/5 text-slate-600 hover:text-slate-400'
+                        m ? `${m.bg} ${m.color}` : 'bg-gray-50 text-gray-500 hover:text-gray-600'
                       }`}
                     >
                       {m ? m.label.split(' ')[0] : 'Papel'}
@@ -847,7 +847,7 @@ function NumbersPanel({
                           initial={{ opacity: 0, y: -4 }}
                           animate={{ opacity: 1, y: 0 }}
                           exit={{ opacity: 0, y: -4 }}
-                          className="absolute right-0 top-full mt-1 bg-[#12151e] border border-white/10 rounded-xl shadow-2xl z-50 overflow-hidden w-44"
+                          className="absolute right-0 top-full mt-1 bg-gray-50 border border-gray-200 rounded-xl shadow-2xl z-50 overflow-hidden w-44"
                         >
                           {num && (
                             <>
@@ -857,7 +857,7 @@ function NumbersPanel({
                               >
                                 <Trash2 size={11} /> Remover papel
                               </button>
-                              <div className="border-t border-white/5" />
+                              <div className="border-t border-gray-100" />
                             </>
                           )}
                           {ROLE_OPTIONS.map((o) => {
@@ -867,7 +867,7 @@ function NumbersPanel({
                               <button key={o.value}
                                 onClick={() => assignRole(inst, o.value)}
                                 className={`w-full flex items-center gap-2 px-3 py-2 text-xs transition-colors text-left ${
-                                  role === o.value ? `${rm.bg} ${rm.color}` : 'text-slate-300 hover:bg-white/5'
+                                  role === o.value ? `${rm.bg} ${rm.color}` : 'text-gray-700 hover:bg-gray-50'
                                 }`}
                               >
                                 <RIcon size={12} className={rm.color} />
@@ -883,16 +883,16 @@ function NumbersPanel({
                     {/* Toggle ativo */}
                     {num && (
                       <button onClick={() => onUpdate(num.id, { active: !num.active })}
-                        className="w-5 h-5 flex items-center justify-center text-slate-600 hover:text-slate-400"
+                        className="w-5 h-5 flex items-center justify-center text-gray-500 hover:text-gray-600"
                       >
-                        {num.active ? <ToggleRight size={16} className="text-brand-400" /> : <ToggleLeft size={16} />}
+                        {num.active ? <ToggleRight size={16} className="text-brand-600" /> : <ToggleLeft size={16} />}
                       </button>
                     )}
 
                     {/* Editar detalhes (área, prioridade) */}
                     {num && !isEditing && (
                       <button onClick={() => { setEditingId(num.id); setEditForm({ area: num.area ?? '', priority: num.priority, notes: num.notes ?? '' }) }}
-                        className="w-5 h-5 flex items-center justify-center text-slate-700 hover:text-slate-400"
+                        className="w-5 h-5 flex items-center justify-center text-gray-400 hover:text-gray-600"
                       >
                         <Pencil size={11} />
                       </button>
@@ -905,7 +905,7 @@ function NumbersPanel({
                           <Check size={12} />
                         </button>
                         <button onClick={() => setEditingId(null)}
-                          className="w-5 h-5 flex items-center justify-center text-slate-600"
+                          className="w-5 h-5 flex items-center justify-center text-gray-500"
                         >
                           <X size={12} />
                         </button>
@@ -916,23 +916,23 @@ function NumbersPanel({
 
                 {/* Inline edit: área + prioridade */}
                 {isEditing && (
-                  <div className="px-3 pb-3 pt-1 border-t border-white/5 grid grid-cols-2 gap-2">
+                  <div className="px-3 pb-3 pt-1 border-t border-gray-100 grid grid-cols-2 gap-2">
                     <div>
-                      <p className="text-[10px] text-slate-600 mb-0.5">Área / Especialidade</p>
+                      <p className="text-[10px] text-gray-500 mb-0.5">Área / Especialidade</p>
                       <input
                         value={editForm.area}
                         onChange={(e) => setEditForm((f) => ({ ...f, area: e.target.value }))}
                         placeholder="Ex: Cardiologia"
-                        className="w-full text-xs bg-black/30 text-white border border-white/10 rounded-lg px-2 py-1.5 focus:outline-none focus:border-brand-500/40"
+                        className="w-full text-xs bg-gray-50 text-gray-800 border border-gray-200 rounded-lg px-2 py-1.5 focus:outline-none focus:border-brand-500/40"
                       />
                     </div>
                     <div>
-                      <p className="text-[10px] text-slate-600 mb-0.5">Prioridade fallback</p>
+                      <p className="text-[10px] text-gray-500 mb-0.5">Prioridade fallback</p>
                       <input
                         type="number"
                         value={editForm.priority}
                         onChange={(e) => setEditForm((f) => ({ ...f, priority: parseInt(e.target.value) || 1 }))}
-                        className="w-full text-xs bg-black/30 text-white border border-white/10 rounded-lg px-2 py-1.5 focus:outline-none focus:border-brand-500/40"
+                        className="w-full text-xs bg-gray-50 text-gray-800 border border-gray-200 rounded-lg px-2 py-1.5 focus:outline-none focus:border-brand-500/40"
                       />
                     </div>
                   </div>
@@ -1010,7 +1010,7 @@ function NodeEditorPanel({
   return (
     <div className="flex flex-col h-full">
       {/* Header */}
-      <div className="h-14 px-4 flex items-center gap-3 border-b border-white/5 bg-[#080b10] shrink-0">
+      <div className="h-14 px-4 flex items-center gap-3 border-b border-gray-100 bg-gray-50 shrink-0">
         <div className={`w-8 h-8 rounded-xl flex items-center justify-center shrink-0 ${m.bg}`}>
           <Icon size={16} className={m.color} />
         </div>
@@ -1018,7 +1018,7 @@ function NodeEditorPanel({
           <input
             value={title}
             onChange={(e) => { setTitle(e.target.value); setDirty(true) }}
-            className="flex-1 text-sm font-bold bg-transparent text-white focus:outline-none border-b border-transparent focus:border-white/20 transition-colors truncate"
+            className="flex-1 text-sm font-bold bg-transparent text-gray-800 focus:outline-none border-b border-transparent focus:border-gray-300 transition-colors truncate"
           />
           <span className={`text-[10px] font-bold px-2 py-0.5 rounded-full ${m.bg} ${m.color} shrink-0`}>
             {m.label}
@@ -1031,8 +1031,8 @@ function NodeEditorPanel({
             title={node.active ? 'Desativar nó' : 'Ativar nó'}
             className="flex items-center gap-1 px-2 py-1 rounded-lg text-[10px] font-semibold border transition-all"
             style={node.active
-              ? { borderColor: 'rgba(99,179,237,0.2)', color: '#63b3ed', background: 'rgba(99,179,237,0.08)' }
-              : { borderColor: 'rgba(255,255,255,0.05)', color: '#4a5568', background: 'transparent' }
+              ? { borderColor: 'rgba(37,99,235,0.25)', color: '#2563eb', background: 'rgba(37,99,235,0.06)' }
+              : { borderColor: 'rgba(0,0,0,0.08)', color: '#6b7280', background: 'transparent' }
             }
           >
             {node.active ? <ToggleRight size={13} /> : <ToggleLeft size={13} />}
@@ -1046,7 +1046,7 @@ function NodeEditorPanel({
             className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-bold transition-all ${
               dirty
                 ? 'bg-brand-500 hover:bg-brand-600 text-white'
-                : 'bg-white/5 text-slate-600 cursor-not-allowed'
+                : 'bg-gray-50 text-gray-500 cursor-not-allowed'
             }`}
           >
             <Save size={12} />
@@ -1056,7 +1056,7 @@ function NodeEditorPanel({
           <button
             onClick={() => { onDelete(node.id); onClose() }}
             title="Excluir nó"
-            className="w-8 h-8 flex items-center justify-center rounded-lg text-slate-700 hover:text-red-400 hover:bg-red-500/10 transition-all"
+            className="w-8 h-8 flex items-center justify-center rounded-lg text-gray-400 hover:text-red-400 hover:bg-red-500/10 transition-all"
           >
             <Trash2 size={14} />
           </button>
@@ -1064,7 +1064,7 @@ function NodeEditorPanel({
           <button
             onClick={onClose}
             title="Fechar editor"
-            className="w-8 h-8 flex items-center justify-center rounded-lg text-slate-600 hover:text-slate-300 hover:bg-white/5 transition-all"
+            className="w-8 h-8 flex items-center justify-center rounded-lg text-gray-500 hover:text-gray-700 hover:bg-gray-50 transition-all"
           >
             <X size={14} />
           </button>
@@ -1073,16 +1073,16 @@ function NodeEditorPanel({
 
       {/* Model picker — apenas para nó persona */}
       {node.type === 'persona' && (
-        <div className="px-4 py-2 border-b border-white/5 bg-[#080b10]/50 flex items-center gap-2" ref={modelPickerRef}>
-          <Cpu size={11} className="text-slate-600" />
-          <span className="text-[10px] text-slate-600 font-semibold">Modelo deste nó:</span>
+        <div className="px-4 py-2 border-b border-gray-100 bg-gray-50/50 flex items-center gap-2" ref={modelPickerRef}>
+          <Cpu size={11} className="text-gray-500" />
+          <span className="text-[10px] text-gray-500 font-semibold">Modelo deste nó:</span>
           <div className="relative">
             <button
               onClick={() => setModelPickerOpen((o) => !o)}
               className={`flex items-center gap-1.5 px-2 py-1 rounded-lg text-[10px] font-semibold transition-all ${
                 node.node_model
                   ? 'bg-brand-500/15 text-brand-300 border border-brand-500/20'
-                  : 'bg-white/5 text-slate-500 border border-white/5 hover:text-slate-400'
+                  : 'bg-gray-50 text-gray-500 border border-gray-100 hover:text-gray-600'
               }`}
             >
               {node.node_model ? shortModelLabel(node.node_model) : 'padrão do agente'}
@@ -1094,30 +1094,30 @@ function NodeEditorPanel({
                   initial={{ opacity: 0, y: -4 }}
                   animate={{ opacity: 1, y: 0 }}
                   exit={{ opacity: 0, y: -4 }}
-                  className="absolute left-0 top-full mt-1 bg-[#12151e] border border-white/10 rounded-xl shadow-2xl z-50 overflow-hidden w-56"
+                  className="absolute left-0 top-full mt-1 bg-gray-50 border border-gray-200 rounded-xl shadow-2xl z-50 overflow-hidden w-56"
                 >
                   <button
                     onClick={() => { onUpdate(node.id, { node_model: null }); setModelPickerOpen(false) }}
                     className={`w-full flex items-center gap-2 px-3 py-2 text-xs transition-colors text-left ${
-                      !node.node_model ? 'text-brand-300 bg-brand-500/10' : 'text-slate-400 hover:bg-white/5'
+                      !node.node_model ? 'text-brand-300 bg-brand-500/10' : 'text-gray-600 hover:bg-gray-50'
                     }`}
                   >
                     <span className="w-4 h-4 flex items-center justify-center shrink-0">
-                      {!node.node_model && <Check size={11} className="text-brand-400" />}
+                      {!node.node_model && <Check size={11} className="text-brand-600" />}
                     </span>
                     Padrão do agente
                   </button>
-                  <div className="border-t border-white/5 my-0.5" />
+                  <div className="border-t border-gray-100 my-0.5" />
                   {providerModels.map((mdl) => (
                     <button
                       key={mdl.value}
                       onClick={() => { onUpdate(node.id, { node_model: mdl.value }); setModelPickerOpen(false) }}
                       className={`w-full flex items-center gap-2 px-3 py-2 text-xs transition-colors text-left ${
-                        node.node_model === mdl.value ? 'text-brand-300 bg-brand-500/10' : 'text-slate-300 hover:bg-white/5'
+                        node.node_model === mdl.value ? 'text-brand-300 bg-brand-500/10' : 'text-gray-700 hover:bg-gray-50'
                       }`}
                     >
                       <span className="w-4 h-4 flex items-center justify-center shrink-0">
-                        {node.node_model === mdl.value && <Check size={11} className="text-brand-400" />}
+                        {node.node_model === mdl.value && <Check size={11} className="text-brand-600" />}
                       </span>
                       {mdl.label}
                     </button>
@@ -1130,22 +1130,22 @@ function NodeEditorPanel({
       )}
 
       {/* Editor */}
-      <div className="flex-1 flex flex-col overflow-hidden" style={{ background: 'linear-gradient(180deg, #080b10 0%, #0a0d15 100%)' }}>
+      <div className="flex-1 flex flex-col overflow-hidden" style={{ background: 'linear-gradient(180deg, #f9fafb 0%, #ffffff 100%)' }}>
         <textarea
           ref={textareaRef}
           value={content}
           onChange={(e) => { setContent(e.target.value); setDirty(true) }}
           placeholder="Conteúdo do nó..."
-          className="flex-1 w-full bg-transparent text-sm text-slate-300 font-mono leading-relaxed px-6 py-5 focus:outline-none resize-none"
+          className="flex-1 w-full bg-transparent text-sm text-gray-700 font-mono leading-relaxed px-6 py-5 focus:outline-none resize-none"
           style={{ minHeight: 0 }}
           spellCheck={false}
         />
       </div>
 
       {/* Footer — stats */}
-      <div className="h-8 px-4 flex items-center gap-4 border-t border-white/5 bg-[#080b10] shrink-0">
-        <span className="text-[10px] text-slate-700">{lineCount} linha{lineCount !== 1 ? 's' : ''}</span>
-        <span className="text-[10px] text-slate-700">{charCount} caractere{charCount !== 1 ? 's' : ''}</span>
+      <div className="h-8 px-4 flex items-center gap-4 border-t border-gray-100 bg-gray-50 shrink-0">
+        <span className="text-[10px] text-gray-400">{lineCount} linha{lineCount !== 1 ? 's' : ''}</span>
+        <span className="text-[10px] text-gray-400">{charCount} caractere{charCount !== 1 ? 's' : ''}</span>
         {dirty && <span className="text-[10px] text-brand-500 ml-auto">● não salvo — Ctrl+S</span>}
       </div>
     </div>
@@ -1190,20 +1190,20 @@ function ChatArea({
   return (
     <div className="flex flex-col h-full">
       {/* Header */}
-      <div className="h-14 px-4 flex items-center gap-3 border-b border-white/5 bg-[#080b10] shrink-0">
-        <div className="w-8 h-8 rounded-full bg-white/5 flex items-center justify-center">
-          <User size={15} className="text-slate-400" />
+      <div className="h-14 px-4 flex items-center gap-3 border-b border-gray-100 bg-gray-50 shrink-0">
+        <div className="w-8 h-8 rounded-full bg-gray-50 flex items-center justify-center">
+          <User size={15} className="text-gray-600" />
         </div>
         <div className="flex-1">
-          <p className="text-sm font-bold text-white">{conversation.contact_name}</p>
-          <p className="text-[10px] text-slate-600">Sessão de Teste · IA respondendo</p>
+          <p className="text-sm font-bold text-gray-800">{conversation.contact_name}</p>
+          <p className="text-[10px] text-gray-500">Sessão de Teste · IA respondendo</p>
         </div>
         <div className="flex items-center gap-1">
           {/* Status quick actions */}
           {conversation.status === 'active' && (
             <>
               <button onClick={() => onStatusChange('closed')} title="Encerrar"
-                className="px-2 py-1 text-[10px] font-bold text-slate-500 hover:text-slate-300 border border-white/5 hover:border-white/15 rounded-lg transition-all"
+                className="px-2 py-1 text-[10px] font-bold text-gray-500 hover:text-gray-700 border border-gray-100 hover:border-gray-200 rounded-lg transition-all"
               >
                 Encerrar
               </button>
@@ -1228,16 +1228,16 @@ function ChatArea({
       <div
         ref={scrollRef}
         className="flex-1 overflow-y-auto px-4 py-4 space-y-3"
-        style={{ background: 'linear-gradient(180deg, #080b10 0%, #0a0d15 100%)' }}
+        style={{ background: 'linear-gradient(180deg, #f9fafb 0%, #ffffff 100%)' }}
       >
         {loadingMessages ? (
           <div className="flex items-center justify-center h-full">
-            <Loader2 size={24} className="animate-spin text-slate-600" />
+            <Loader2 size={24} className="animate-spin text-gray-500" />
           </div>
         ) : messages.length === 0 ? (
           <div className="flex flex-col items-center justify-center h-full gap-3 opacity-40">
-            <Brain size={32} className="text-slate-600" />
-            <p className="text-xs text-slate-600 text-center">
+            <Brain size={32} className="text-gray-500" />
+            <p className="text-xs text-gray-500 text-center">
               Comece uma conversa para testar a secretária.
             </p>
           </div>
@@ -1254,16 +1254,16 @@ function ChatArea({
               >
                 {!isUser && (
                   <div className="w-6 h-6 rounded-full bg-brand-500/20 flex items-center justify-center shrink-0 mt-0.5">
-                    <Sparkles size={11} className="text-brand-400" />
+                    <Sparkles size={11} className="text-brand-600" />
                   </div>
                 )}
                 <div className={`max-w-[75%] rounded-2xl px-4 py-2.5 ${
                   isUser
                     ? 'bg-brand-600 text-white rounded-br-sm'
-                    : 'bg-[#12151e] border border-white/5 text-slate-200 rounded-bl-sm'
+                    : 'bg-gray-50 border border-gray-100 text-gray-800 rounded-bl-sm'
                 }`}>
                   <p className="text-sm leading-relaxed whitespace-pre-wrap">{msg.content}</p>
-                  <p className={`text-[10px] mt-1 ${isUser ? 'text-white/50 text-right' : 'text-slate-600'}`}>
+                  <p className={`text-[10px] mt-1 ${isUser ? 'text-gray-800/50 text-right' : 'text-gray-500'}`}>
                     {format(parseISO(msg.created_at), 'HH:mm')}
                   </p>
                 </div>
@@ -1276,9 +1276,9 @@ function ChatArea({
         {sendingMessage && (
           <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="flex justify-start gap-2">
             <div className="w-6 h-6 rounded-full bg-brand-500/20 flex items-center justify-center shrink-0 mt-0.5">
-              <Sparkles size={11} className="text-brand-400" />
+              <Sparkles size={11} className="text-brand-600" />
             </div>
-            <div className="bg-[#12151e] border border-white/5 rounded-2xl rounded-bl-sm px-4 py-3">
+            <div className="bg-gray-50 border border-gray-100 rounded-2xl rounded-bl-sm px-4 py-3">
               <div className="flex gap-1 items-center h-4">
                 {[0, 1, 2].map((i) => (
                   <motion.span key={i} className="w-1.5 h-1.5 rounded-full bg-brand-400"
@@ -1294,7 +1294,7 @@ function ChatArea({
 
       {/* Input */}
       {conversation.status === 'active' ? (
-        <div className="px-4 py-3 border-t border-white/5 bg-[#080b10] flex items-end gap-2 shrink-0">
+        <div className="px-4 py-3 border-t border-gray-100 bg-gray-50 flex items-end gap-2 shrink-0">
           <textarea
             ref={inputRef}
             value={input}
@@ -1302,7 +1302,7 @@ function ChatArea({
             onKeyDown={onKeyDown}
             placeholder="Digite uma mensagem... (Enter para enviar)"
             rows={1}
-            className="flex-1 bg-white/5 border border-white/10 rounded-2xl px-4 py-2.5 text-sm text-white placeholder-slate-600 focus:outline-none focus:border-brand-500/40 resize-none max-h-32 overflow-y-auto"
+            className="flex-1 bg-gray-50 border border-gray-200 rounded-2xl px-4 py-2.5 text-sm text-gray-800 placeholder-gray-400 focus:outline-none focus:border-brand-500/40 resize-none max-h-32 overflow-y-auto"
             style={{ height: 'auto' }}
             onInput={(e) => {
               const t = e.currentTarget
@@ -1317,10 +1317,10 @@ function ChatArea({
           </button>
         </div>
       ) : (
-        <div className="px-4 py-3 border-t border-white/5 bg-[#080b10] shrink-0">
-          <p className="text-xs text-center text-slate-600">
+        <div className="px-4 py-3 border-t border-gray-100 bg-gray-50 shrink-0">
+          <p className="text-xs text-center text-gray-500">
             Conversa {STATUS_META[conversation.status].label.toLowerCase()}. &nbsp;
-            <button onClick={() => onStatusChange('active')} className="text-brand-400 hover:underline">Reabrir</button>
+            <button onClick={() => onStatusChange('active')} className="text-brand-600 hover:underline">Reabrir</button>
           </p>
         </div>
       )}
@@ -1338,18 +1338,18 @@ function NewConvModal({
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60" onClick={onClose}>
       <motion.div initial={{ opacity: 0, scale: 0.95 }} animate={{ opacity: 1, scale: 1 }}
-        className="bg-[#0f1117] border border-white/10 rounded-2xl p-6 w-80 shadow-2xl"
+        className="bg-white border border-gray-200 rounded-2xl p-6 w-80 shadow-2xl"
         onClick={(e) => e.stopPropagation()}
       >
-        <h3 className="text-base font-black text-white mb-4">Nova sessão de teste</h3>
-        <label className="text-xs text-slate-500 font-semibold block mb-1">Nome do contato (simulado)</label>
+        <h3 className="text-base font-black text-gray-800 mb-4">Nova sessão de teste</h3>
+        <label className="text-xs text-gray-500 font-semibold block mb-1">Nome do contato (simulado)</label>
         <input
           autoFocus
           value={name}
           onChange={(e) => setName(e.target.value)}
           onKeyDown={(e) => { if (e.key === 'Enter' && name.trim()) { onConfirm(name.trim()); onClose() } }}
           placeholder="Ex: João Teste"
-          className="w-full bg-white/5 border border-white/10 rounded-xl px-3 py-2.5 text-sm text-white placeholder-slate-600 focus:outline-none focus:border-brand-500/40 mb-4"
+          className="w-full bg-gray-50 border border-gray-200 rounded-xl px-3 py-2.5 text-sm text-gray-800 placeholder-gray-400 focus:outline-none focus:border-brand-500/40 mb-4"
         />
         <div className="flex gap-2">
           <button onClick={() => { if (name.trim()) { onConfirm(name.trim()); onClose() } }}
@@ -1358,7 +1358,7 @@ function NewConvModal({
           >
             Iniciar
           </button>
-          <button onClick={onClose} className="py-2.5 px-4 bg-white/5 text-slate-400 text-sm rounded-xl hover:bg-white/10 transition-all">
+          <button onClick={onClose} className="py-2.5 px-4 bg-gray-50 text-gray-600 text-sm rounded-xl hover:bg-gray-100 transition-all">
             Cancelar
           </button>
         </div>
@@ -1380,10 +1380,10 @@ function NewSlotModal({
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60" onClick={onClose}>
       <motion.div initial={{ opacity: 0, scale: 0.95 }} animate={{ opacity: 1, scale: 1 }}
-        className="bg-[#0f1117] border border-white/10 rounded-2xl p-6 w-96 shadow-2xl"
+        className="bg-white border border-gray-200 rounded-2xl p-6 w-96 shadow-2xl"
         onClick={(e) => e.stopPropagation()}
       >
-        <h3 className="text-base font-black text-white mb-4">Novo horário na agenda</h3>
+        <h3 className="text-base font-black text-gray-800 mb-4">Novo horário na agenda</h3>
         <div className="space-y-3">
           {[
             { key: 'title', label: 'Título', type: 'text', placeholder: 'Ex: Consulta Técnica' },
@@ -1393,10 +1393,10 @@ function NewSlotModal({
             { key: 'notes', label: 'Observações', type: 'text', placeholder: 'Opcional' },
           ].map(({ key, label, type, placeholder }) => (
             <div key={key}>
-              <p className="text-xs text-slate-500 font-semibold mb-1">{label}</p>
+              <p className="text-xs text-gray-500 font-semibold mb-1">{label}</p>
               <input type={type} value={(form as any)[key]} placeholder={placeholder}
                 onChange={(e) => update(key, e.target.value)}
-                className="w-full bg-white/5 border border-white/10 rounded-xl px-3 py-2 text-sm text-white placeholder-slate-600 focus:outline-none focus:border-brand-500/40"
+                className="w-full bg-gray-50 border border-gray-200 rounded-xl px-3 py-2 text-sm text-gray-800 placeholder-gray-400 focus:outline-none focus:border-brand-500/40"
               />
             </div>
           ))}
@@ -1408,7 +1408,7 @@ function NewSlotModal({
           >
             Adicionar
           </button>
-          <button onClick={onClose} className="py-2.5 px-4 bg-white/5 text-slate-400 text-sm rounded-xl hover:bg-white/10 transition-all">
+          <button onClick={onClose} className="py-2.5 px-4 bg-gray-50 text-gray-600 text-sm rounded-xl hover:bg-gray-100 transition-all">
             Cancelar
           </button>
         </div>
@@ -1473,23 +1473,23 @@ function HelpModal({ onClose, onUseModel, canUse }: {
   return (
     <div className="fixed inset-0 z-[100] bg-black/70 flex items-center justify-center p-4" onClick={onClose}>
       <div
-        className="bg-[#0c0e14] border border-white/10 rounded-2xl w-full max-w-2xl max-h-[85vh] flex flex-col"
+        className="bg-white border border-gray-200 rounded-2xl w-full max-w-2xl max-h-[85vh] flex flex-col"
         onClick={(e) => e.stopPropagation()}
       >
-        <div className="flex items-center justify-between px-6 py-4 border-b border-white/10 shrink-0">
+        <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 shrink-0">
           <div className="flex items-center gap-3">
             <div className="w-9 h-9 rounded-xl bg-brand-500/20 flex items-center justify-center">
-              <HelpCircle size={18} className="text-brand-400" />
+              <HelpCircle size={18} className="text-brand-600" />
             </div>
-            <h2 className="text-lg font-bold text-white">Como usar e configurar a Secretária</h2>
+            <h2 className="text-lg font-bold text-gray-800">Como usar e configurar a Secretária</h2>
           </div>
-          <button onClick={onClose} className="text-slate-500 hover:text-white"><X size={20} /></button>
+          <button onClick={onClose} className="text-gray-500 hover:text-gray-800"><X size={20} /></button>
         </div>
 
         <div className="overflow-y-auto px-6 py-5 space-y-6">
           <section>
-            <h3 className="text-sm font-bold text-brand-400 uppercase tracking-wide mb-2">Como funciona</h3>
-            <p className="text-sm text-slate-300 leading-relaxed">
+            <h3 className="text-sm font-bold text-brand-600 uppercase tracking-wide mb-2">Como funciona</h3>
+            <p className="text-sm text-gray-700 leading-relaxed">
               A secretária é um <strong>Agente</strong> de IA cujo comportamento vem do <strong>Cérebro</strong> —
               um conjunto de nós. Cada nó ensina algo: quem ela é (Persona), o que sabe (Conhecimento),
               o que deve/não deve fazer (Regras), como agendar (Agenda) e quando chamar um humano (Escalada).
@@ -1499,18 +1499,18 @@ function HelpModal({ onClose, onUseModel, canUse }: {
           </section>
 
           <section>
-            <h3 className="text-sm font-bold text-brand-400 uppercase tracking-wide mb-3">Modelos de configuração (copie e adapte)</h3>
+            <h3 className="text-sm font-bold text-brand-600 uppercase tracking-wide mb-3">Modelos de configuração (copie e adapte)</h3>
             <div className="space-y-4">
               {HELP_MODELOS.map((m) => {
                 const Icon = m.icon
                 return (
-                  <div key={m.titulo} className="rounded-xl border border-white/10 bg-white/[0.02] p-4">
+                  <div key={m.titulo} className="rounded-xl border border-gray-200 bg-gray-50 p-4">
                     <div className="flex items-center gap-2 mb-1">
                       <Icon size={16} className={m.cor} />
-                      <span className="text-sm font-semibold text-white">{m.titulo}</span>
+                      <span className="text-sm font-semibold text-gray-800">{m.titulo}</span>
                     </div>
-                    <p className="text-xs text-slate-400 mb-2">{m.descricao}</p>
-                    <pre className="text-xs text-slate-300 bg-black/40 rounded-lg p-3 whitespace-pre-wrap font-mono leading-relaxed">{m.exemplo}</pre>
+                    <p className="text-xs text-gray-600 mb-2">{m.descricao}</p>
+                    <pre className="text-xs text-gray-700 bg-gray-100 rounded-lg p-3 whitespace-pre-wrap font-mono leading-relaxed">{m.exemplo}</pre>
                     <button
                       onClick={() => onUseModel(m.type, m.titulo, m.exemplo)}
                       disabled={!canUse}
@@ -1526,8 +1526,8 @@ function HelpModal({ onClose, onUseModel, canUse }: {
           </section>
 
           <section>
-            <h3 className="text-sm font-bold text-brand-400 uppercase tracking-wide mb-2">Dicas</h3>
-            <ul className="text-sm text-slate-300 space-y-1.5 list-disc list-inside">
+            <h3 className="text-sm font-bold text-brand-600 uppercase tracking-wide mb-2">Dicas</h3>
+            <ul className="text-sm text-gray-700 space-y-1.5 list-disc list-inside">
               <li>Comece pela <strong>Persona</strong> e pelo <strong>Conhecimento</strong> — são os que mais mudam a qualidade.</li>
               <li>Seja específico: a IA segue o que está escrito. Numere as <strong>Regras</strong>.</li>
               <li>Sempre <strong>teste em Conversas</strong> antes de ativar para clientes reais.</li>
@@ -1607,7 +1607,7 @@ export function SecretariaView(props: { onNavigate?: (view: string) => void } =
   }
 
   return (
-    <div className="flex h-full w-full bg-[#080b10] overflow-hidden font-sans">
+    <div className="flex h-full w-full bg-gray-50 overflow-hidden font-sans">
 
       {/* Thin Nav */}
       <ThinNav active={activeTab} onChange={handleTabChange} onHelp={() => setShowHelp(true)} onBack={() => props.onNavigate?.('dashboard')} />
@@ -1626,10 +1626,10 @@ export function SecretariaView(props: { onNavigate?: (view: string) => void } =
       )}
 
       {/* Left Panel */}
-      <div className="w-[280px] h-full bg-[#0a0d15] border-r border-white/5 flex flex-col shrink-0">
+      <div className="w-[280px] h-full bg-white border-r border-gray-100 flex flex-col shrink-0">
 
         {/* Agent selector */}
-        <div className="border-b border-white/5 shrink-0">
+        <div className="border-b border-gray-100 shrink-0">
           <AgentDropdown
             agents={store.agents}
             selected={store.selectedAgent}
@@ -1718,16 +1718,16 @@ export function SecretariaView(props: { onNavigate?: (view: string) => void } =
           />
         ) : (
           <div className="flex-1 flex flex-col items-center justify-center gap-4 opacity-30">
-            <Brain size={48} className="text-slate-600" />
+            <Brain size={48} className="text-gray-500" />
             <div className="text-center">
-              <p className="text-sm font-bold text-slate-500">
+              <p className="text-sm font-bold text-gray-500">
                 {activeTab === 'conversations' && 'Selecione ou crie uma sessão de teste'}
                 {activeTab === 'brain' && 'Clique em ⤢ em um nó para abrir o editor'}
                 {activeTab === 'calendar' && 'Gerencie a agenda no painel lateral'}
                 {activeTab === 'agents' && 'Configure e selecione um agente no painel lateral'}
                 {activeTab === 'numbers' && 'Gerencie os números e papéis no painel lateral'}
               </p>
-              <p className="text-xs text-slate-700 mt-1">Secretária IA — NewWhats</p>
+              <p className="text-xs text-gray-400 mt-1">Secretária IA — NewWhats</p>
             </div>
           </div>
         )}