Update frontend/src/App.css

frontend/src/App.css

@@ -1,6 +1,6 @@
 /* =================================
-   Global Styles & CSS Variables
-   ================================= */
+    Global Styles & CSS Variables
+    ================================= */
 :root {
   --primary-color: #22c55e; /* Green for accents */
   --background-color: #f0f2f5; /* Light grey for chat background */
@@ -22,8 +22,8 @@ body, html, #root {
 }
 
 /* =================================
-   Main App Layout
-   ================================= */
+    Main App Layout
+    ================================= */
 .app-wrapper {
   display: flex;
   flex-direction: column;
@@ -39,8 +39,8 @@ body, html, #root {
 }
 
 /* =================================
-   Header
-   ================================= */
+    Header
+    ================================= */
 .app-header {
   display: flex;
   justify-content: space-between;
@@ -52,6 +52,17 @@ body, html, #root {
   flex-shrink: 0;
 }
 
+.logo {
+  display: flex; /* Make the logo container a flex container */
+  align-items: center; /* Vertically align items */
+  gap: 10px; /* Add space between Dobby text and logo */
+}
+
+.logo .brand-names {
+  display: flex; /* Ensure Dobby and GUVI Assistant stack vertically */
+  flex-direction: column;
+}
+
 .logo .main-brand {
   font-size: 1.8em;
   font-weight: bold;
@@ -69,8 +80,8 @@ body, html, #root {
 }
 
 /* =================================
-   Buttons & Links
-   ================================= */
+    Buttons & Links
+    ================================= */
 .link-green {
   color: var(--primary-color);
   font-weight: 600;
@@ -103,8 +114,8 @@ body, html, #root {
 }
 
 /* =================================
-   Auth Forms (Login/Sign Up)
-   ================================= */
+    Auth Forms (Login/Sign Up)
+    ================================= */
 .auth-container {
   display: flex;
   justify-content: center;
@@ -164,8 +175,8 @@ body, html, #root {
 }
 
 /* =================================
-   Chat Interface
-   ================================= */
+    Chat Interface
+    ================================= */
 .chat-main {
   display: flex;
   flex-direction: column;
@@ -251,8 +262,8 @@ body, html, #root {
 }
 
 /* =================================
-   Chat Input Area
-   ================================= */
+    Chat Input Area
+    ================================= */
 .chat-input-area {
   padding: 1rem 1.5rem;
   border-top: 1px solid var(--border-color);
@@ -326,11 +337,10 @@ body, html, #root {
   100% { transform: scale(1); }
 }
 
-
 .header-logo {
   height: 40px; /* Adjust size as needed */
   width: auto;
-  margin-right: 10px;
+  /* Removed margin-right as gap on parent .logo handles spacing */
 }
 
 .avatar-image {