Finaliza as alterações e acessibilidade e inicio do chat suporte

src/App.css

@@ -77,16 +77,18 @@ html[data-bs-theme="dark"] .App-link {
   z-index: 999;
 }
 
-/* App.css */
 
 .floating-buttons-container {
-  /* Posicionamento do GRUPO */
+  
-  position: absolute;
+  position: fixed;
   bottom: 20px;
   right: 20px;
   z-index: 1000;
-  
-  /* Alinhamento dos botões */
   display: flex;
-  gap: 10px; /* Espaçamento entre os botões */
+  gap: 10px;
+  transition: right 0.4s ease-in-out;
+}
+
+.floating-buttons-container.chat-open {
+  right: 370px;
 }

src/App.js

@@ -2,9 +2,17 @@ import React, { useState } from "react";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import './App.css';
 
+// Suas páginas
 import LandingPage from './pages/LandingPage';
+import Login from "./pages/Login";
+import Register from "./pages/Register";
+import Forgot from "./pages/ForgotPassword";
 import PerfilSecretaria from "./perfis/perfil_secretaria/PerfilSecretaria";
+import PerfilFinanceiro from "./perfis/perfil_financeiro/PerfilFinanceiro";
+import Perfiladm from "./perfis/Perfil_adm/Perfiladm";
+import PerfilMedico from "./perfis/Perfil_medico/PerfilMedico";
 
+// Componentes globais
 import VlibrasWidget from "./components/VlibrasWidget";
 import BotaoAcessibilidade from "./components/botaoacessibilidade.jsx";
 import ChatToggleButton from './components/ChatButton/ChatButton';
@@ -23,14 +31,21 @@ function App() {
         <div className={`main-content ${isChatOpen ? 'chat-open' : ''}`}>
           <VlibrasWidget />
 
-          <div className="floating-buttons-container">
+          <div className={`floating-buttons-container ${isChatOpen ? 'chat-open' : ''}`}>
   <BotaoAcessibilidade />
   <ChatToggleButton onClick={toggleChat} />
 </div>
 
           <Routes>
             <Route path="/" element={<LandingPage />} />
+            <Route path="/login" element={<Login />} />
+            <Route path="/register" element={<Register />} />
+            <Route path="/forgotPassword" element={<Forgot />} />
             <Route path="/secretaria/*" element={<PerfilSecretaria />} />
+            <Route path="/financeiro/*" element={<PerfilFinanceiro />} />
+            <Route path="/medico/*" element={<PerfilMedico />} />
+            <Route path="/admin/*" element={<Perfiladm />} />
+            <Route path="*" element={<h2>Página não encontrada</h2>} />
           </Routes>
         </div>
 

src/components/ChatSidebar/ChatSidebar.css

@@ -1,28 +1,16 @@
-/* ================================================= */
-/* Novo Estilo para ChatSidebar.css             */
-/* Inspirado no Design "MediConnect"            */
-/* ================================================= */
 
 .chat-sidebar {
-  /* Layout e Posição */
   height: 100vh;
   width: 350px;
   position: fixed;
   top: 0;
   right: 0;
-  
-  /* Estilo MediConnect */
   background-color: #FFFFFF; /* Fundo branco limpo, como os cards */
   color: #333; /* Texto escuro padrão */
   font-family: Arial, sans-serif; /* Use a mesma fonte do seu site, se souber */
-  
-  /* Animação (sem alteração) */
   transform: translateX(100%);
   transition: transform 0.4s ease-in-out;
-  
-  /* Sombra suave, como a dos cards */
   box-shadow: -2px 0 15px rgba(0, 0, 0, 0.1); 
-  
   display: flex;
   flex-direction: column;
   z-index: 1000;
@@ -31,8 +19,6 @@
 .chat-sidebar.open {
   transform: translateX(0);
 }
-
-/* Cabeçalho */
 .chat-header {
   padding: 15px 20px;
   background-color: #F8F9FA; /* Cinza bem claro, como o fundo do site */
@@ -94,8 +80,6 @@
   border-bottom-right-radius: 4px; /* Detalhe de estilo */
 }
 
-
-/* Área de Input */
 .chat-input-area {
   padding: 15px 20px;
   display: flex;
@@ -113,6 +97,7 @@
   color: #333;
   transition: border-color 0.2s;
 }
+
 .chat-input-area input:focus {
   outline: none;
   border-color: #6C63FF; /* Destaque com a cor principal */