🚀 Auto-deploy: Camila atualizado em 25/05/2026 19:57:12

public/app.js

@@ -230,7 +230,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
     const avatarHtml = isUser 
       ? `<div class="avatar user-avatar">U</div>`
-      : `<div class="avatar bot-avatar">C</div>`;
+      : `<div class="avatar bot-avatar bot-avatar-img-wrapper"><img src="assets/camila_prof.png" alt="Camila AI" class="bot-avatar-img"></div>`;
 
     let contentHtml = '';
     if (isUser) {
@@ -310,7 +310,7 @@ document.addEventListener('DOMContentLoaded', () => {
     
     botRow.innerHTML = `
       <div class="message-icon">
-        <div class="avatar bot-avatar">C</div>
+        <div class="avatar bot-avatar bot-avatar-img-wrapper"><img src="assets/camila_prof.png" alt="Camila AI" class="bot-avatar-img"></div>
       </div>
       <div class="message-content">
         <span class="typing-cursor"></span>

public/index.html

@@ -45,7 +45,9 @@
       <!-- Rodapé do Menu Lateral -->
       <div class="sidebar-footer">
         <div class="user-profile">
-          <div class="avatar user-avatar">C</div>
+          <div class="avatar user-avatar sidebar-avatar-wrapper">
+            <img src="assets/camila_prof.png" alt="Camila Reifonas" class="sidebar-avatar-img">
+          </div>
           <div class="user-info">
             <span class="user-name">Camila Reifonas</span>
             <span class="user-status">Online</span>
@@ -91,8 +93,8 @@
         <!-- Estado inicial / Bem-vindo (se não houver mensagens) -->
         <div class="welcome-container" id="welcomeContainer">
           <div class="welcome-logo">
-            <div class="logo-outer">
-              <div class="logo-inner">C</div>
+            <div class="logo-outer welcome-avatar-wrapper">
+              <img src="assets/camila_prof.png" alt="Camila AI" class="welcome-avatar-img">
             </div>
           </div>
           <h2>Como posso ajudar hoje?</h2>

public/login.html

@@ -16,8 +16,9 @@
   <div class="login-container">
     <div class="login-card">
       <div class="login-header">
-        <div class="logo-orb">
-          <div class="logo-inner">C</div>
+        <div class="avatar-profile-wrapper">
+          <img src="assets/camila_prof.png" alt="Camila Reifonas" class="avatar-profile-img">
+          <div class="avatar-profile-pulse"></div>
         </div>
         <h1>Camila AI</h1>
         <p>Insira a senha de acesso para entrar no workspace</p>

public/style.css

@@ -1065,3 +1065,123 @@ code {
     display: none;
   }
 }
+
+/* ==========================================================================
+   ESTILOS DE AVATARES COM FOTO (MINIMALISTAS E ELEGANTES)
+   ========================================================================== */
+.avatar-profile-wrapper {
+  position: relative;
+  width: 110px;
+  height: 110px;
+  margin-bottom: 12px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.avatar-profile-img {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  object-fit: cover;
+  border: 3px solid rgba(16, 163, 127, 0.4);
+  box-shadow: 0 0 20px rgba(16, 163, 127, 0.2);
+  z-index: 2;
+  transition: transform var(--transition-normal), border-color var(--transition-normal);
+}
+
+.avatar-profile-wrapper:hover .avatar-profile-img {
+  transform: scale(1.04);
+  border-color: var(--brand-green);
+  box-shadow: 0 0 25px rgba(16, 163, 127, 0.45);
+}
+
+.avatar-profile-pulse {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  border: 1.5px solid var(--brand-green);
+  opacity: 0.7;
+  z-index: 1;
+  animation: pulseGlow 3s cubic-bezier(0.24, 0, 0.38, 1) infinite;
+  pointer-events: none;
+}
+
+@keyframes pulseGlow {
+  0% {
+    transform: scale(0.96);
+    opacity: 0.8;
+  }
+  50% {
+    transform: scale(1.15);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(0.96);
+    opacity: 0;
+  }
+}
+
+/* Sidebar Avatar */
+.sidebar-avatar-wrapper {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  overflow: hidden;
+  border: 1.5px solid rgba(255, 255, 255, 0.15);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.sidebar-avatar-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* Welcome Logo Avatar */
+.welcome-avatar-wrapper {
+  width: 72px;
+  height: 72px;
+  border-radius: 50%;
+  overflow: hidden;
+  border: 2px solid rgba(16, 163, 127, 0.3);
+  box-shadow: 0 0 20px var(--brand-glow);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform var(--transition-normal);
+}
+
+.welcome-avatar-wrapper:hover {
+  transform: scale(1.05);
+  border-color: var(--brand-green);
+}
+
+.welcome-avatar-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* Chat Message Bot Avatar */
+.bot-avatar-img-wrapper {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  overflow: hidden;
+  border: 1.5px solid rgba(16, 163, 127, 0.3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.bot-avatar-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}