Upload 14 files

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+static/treeman.png filter=lfs diff=lfs merge=lfs -text

static/mediaabout.css

@@ -0,0 +1,240 @@
+
+@media screen and (max-width: 1100px){
+    
+
+
+    
+    .burger{
+        position: absolute;
+        cursor: pointer;
+        right: 5%;
+        top: 50%;
+        transform: translate(-5% , -50%);
+        z-index: 2;
+     }
+       
+    .line{
+        width: 30px;
+        height: 3px;
+        background:  #4b5b39;
+        margin: 5px;
+    }
+
+    .burger:hover .line{
+        transform-origin: 50% 50%;
+        animation: line-grow ease-out 400ms   ;
+    }
+    .burger:focus .line{
+        transform-origin: 50% 50%;
+        animation: line-grow ease-out 400ms   ;
+    }
+
+@keyframes line-grow{
+    0%{transform: scaleX(1);}
+    50%{transform: scaleX(1.5);}
+    100%{transform: scaleX(1);}
+}
+    .logo{
+        width: 40%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .navbar{
+        position: relative;
+       
+     
+        
+    }
+
+
+     .nav-Links{
+        position: sticky;
+        height: 100vh;
+        width: 100%;
+        background:turquoise;
+        flex-direction: column;
+        
+        align-items: center;
+        clip-path: circle(100px at 90% -10%);
+        -webkit-clip-path: circle(100px at 90% -10%);
+        transition: all 1s ease-out;
+        pointer-events: none;
+    }
+ 
+    .nav-Links.open{
+        clip-path: circle(1000px at 90% -10%);
+        -webkit-clip-path: circle(1000px at 90% -10%);
+        pointer-events: all;
+        justify-content: space-evenly;
+    }
+
+    .nav-Links li{
+        opacity: 0;
+        justify-content: center;
+        display: flex;
+    }
+
+    .nav-Links li a{
+
+        font-size: 25px;
+    }
+
+    .nav-Links li:nth-child(1){
+        transition: all 0.5s ease 0.2s;
+    }
+    .nav-Links li:nth-child(2){
+        transition: all 0.5s ease 0.4s;
+    }
+    .nav-Links li:nth-child(3){
+        transition: all 0.5s ease 0.6s;
+    }
+    .nav-Links li:nth-child(4){
+        transition: all 0.5s ease 0.8s;
+    }
+    .nav-Links li:nth-child(5){
+        transition: all 0.5s ease 0.8s;
+    }
+ 
+    li.fade{
+        opacity: 1;
+    }
+ 
+   
+
+    #search{
+        width: 100%;
+    }
+
+/* 
+    .firstsection{
+        height: 100vh;
+        
+    } */
+
+
+
+    .box {
+     
+        width: 700px;
+        height: 850px;
+        border-radius: 10vw 10vw;
+        margin: auto;
+     }
+
+
+     .first{
+         margin-top: auto;
+     }
+
+    .first h1{
+      font-size: 1.7rem
+    
+    }
+
+    .first p{
+        font-size: 17px;
+        margin-top: 2rem;
+        line-height: 1.5em;
+    }
+
+    .first p::before{
+        content: open-quote ;
+        color: #4b5b39;
+        font-size: 2rem;
+    }
+    
+    .first p::after{
+        content: close-quote ;
+        color: #4b5b39;
+        font-size: 2rem;
+    }
+    
+
+
+
+
+
+    
+   
+    
+    .container{
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        padding: 5px;
+    }
+    
+    .sec1{
+        display: flex;
+        flex-direction: row;
+        justify-content:center;
+        align-items: center;
+     
+     }
+    
+     .logo-footer{
+        width: 20%;
+        display: flex;
+        align-items: center;
+    
+     }
+    
+     .logo-footer img{
+        width: 90%;
+        border: 3px solid white;
+        border-radius: 10px
+    }
+    
+     .useless-text{
+        font-size: 11px;
+        padding-left: 10px;
+        }
+    
+
+        .site-name {
+            width: 51%;
+            font-size: 10px;
+        }
+
+
+    
+     .social-links{
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        width: 80%;
+    
+     }
+    
+     .log1{
+        padding-left: 4px;
+        padding-right: 4px;
+        border-radius: 50%;
+    }
+    .log2{
+        border-radius: 50%;
+        padding-left: 4px;
+        padding-right: 4px;
+    }
+    .log3{
+        border-radius: 50%;
+        padding-left: 4px;
+        padding-right: 4px;
+    }
+    .log4{
+        border-radius: 50%;
+        padding-left: 4px;
+        padding-right: 4px;
+    }
+    
+    .log1 img , .log2 img ,.log3 img,.log4 img {
+        border-radius: 50%;
+    }
+
+
+
+ }

static/mediahome.css

@@ -0,0 +1,429 @@
+
+@media screen and (max-width: 1100px){
+    
+    .burger{
+        position: absolute;
+        cursor: pointer;
+        right: 5%;
+        top: 50%;
+        transform: translate(-5% , -50%);
+        z-index: 2;
+     }
+       
+    .line{
+        width: 30px;
+        height: 3px;
+        background:  #4b5b39;
+        margin: 5px;
+    }
+
+    .burger:hover .line{
+        transform-origin: 50% 50%;
+        animation: line-grow ease-out 400ms   ;
+    }
+    .burger:focus .line{
+        transform-origin: 50% 50%;
+        animation: line-grow ease-out 400ms   ;
+    }
+
+@keyframes line-grow{
+    0%{transform: scaleX(1);}
+    50%{transform: scaleX(1.5);}
+    100%{transform: scaleX(1);}
+}
+    .logo{
+        width: 40%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .navbar{
+        position: relative;
+       
+     
+        
+    }
+
+
+     .nav-Links{
+        position: sticky;
+        height: 100vh;
+        width: 100%;
+        background:#abee53;
+        flex-direction: column;
+        
+        align-items: center;
+        clip-path: circle(100px at 90% -10%);
+        -webkit-clip-path: circle(100px at 90% -10%);
+        transition: all 1s ease-out;
+        pointer-events: none;
+    }
+ 
+    .nav-Links.open{
+        clip-path: circle(1000px at 90% -10%);
+        -webkit-clip-path: circle(1000px at 90% -10%);
+        pointer-events: all;
+        justify-content: space-evenly;
+    }
+
+    .nav-Links li{
+        opacity: 0;
+        justify-content: center;
+        display: flex;
+    }
+
+    .nav-Links li a{
+
+        font-size: 24px;
+    }
+
+    .nav-Links li:nth-child(1){
+        transition: all 0.5s ease 0.2s;
+    }
+    .nav-Links li:nth-child(2){
+        transition: all 0.5s ease 0.4s;
+    }
+    .nav-Links li:nth-child(3){
+        transition: all 0.5s ease 0.6s;
+    }
+    .nav-Links li:nth-child(4){
+        transition: all 0.5s ease 0.8s;
+    }
+    .nav-Links li:nth-child(5){
+        transition: all 0.5s ease 0.8s;
+    }
+ 
+    li.fade{
+        opacity: 1;
+    }
+
+    /* .v-class-resp{
+        position: fixed;
+        height: 80vh;
+        width: 100%;
+        background-color: #5b78c7;
+        flex-direction: column;
+        align-items: center;
+        clip-path: circle(100px at 90% -10%);
+        -webkit-clip-path: circle(100px at 90% -10%);
+        transition: all 1s ease-out;
+        pointer-events: none;
+     
+    } */
+
+
+/*     
+    .v-class-resp.open{
+        clip-path: circle(1000px at 90% -10%);
+        -webkit-clip-path: circle(1000px at 90% -10%);
+        pointer-events: all;
+    }
+    
+    .v-class-resp li{
+        opacity: 0;
+    }
+    .v-class-resp div{
+        opacity: 0;
+    }
+
+    .v-class-resp li a{
+
+        font-size: 25px;
+    }
+     */
+
+    /* }
+    .nav-list1 div:nth-child(1){
+        transition: all 0.5s ease 0.2s;
+    }
+    .nav-list1 div:nth-child(2){
+        transition: all 0.5s ease 0.2s;
+    }
+    .nav-list1 div:nth-child(3){
+        transition: all 0.5s ease 0.2s;
+    }
+    .nav-list li:nth-child(1){
+        transition: all 0.5s ease 0.2s;
+    }
+    .nav-list li:nth-child(2){
+        transition: all 0.5s ease 0.3s;
+    }
+    .nav-list li:nth-child(3){
+        transition: all 0.5s ease 0.4s;
+    }
+    .nav-list li:nth-child(4){
+        transition: all 0.5s ease 0.5s;
+    }
+   
+    div.fade
+    li.fade{
+        opacity: 1;
+    } */
+  
+  
+
+    
+
+
+
+    .firstsection{
+        height: 100vh;
+        
+    }
+ 
+    .box-main{
+        flex-direction:column-reverse;
+        max-width: 100%;
+        justify-content: space-evenly;
+        height: 100%;
+    }
+    
+    .secondhalf{
+         width: 100%;
+         margin: 0% 0%;
+        padding: 0% 0%;
+        justify-content: center;
+    }
+
+    .secondhalf img{
+        align-items: center;
+        width: 180px;
+        border: 2px solid white;
+        border-radius: 50px;
+        display: block;
+       justify-content: center;
+    }
+
+    #search{
+        width: 100%;
+    }
+
+    .burger{
+        display: block;
+    }
+
+    .h-nav-resp{
+        height: 60px;
+        
+    }
+ 
+    .v-class-resp{
+        opacity: 0;
+
+    }
+
+
+
+
+
+    .text-big-section{
+   
+      
+        font-size: 23px;
+       
+      
+    
+    }
+    
+    .text-small-section{
+    
+      
+        font-size: 16px;
+      
+    }
+    
+    .section-mid{
+        height: 250vh;
+    }
+
+.section1{
+    margin-left: 10%;
+    margin-right: 10%;
+    margin-top: 5%;
+    margin-bottom: 5%;
+}
+.section2{
+    margin-left: 10%;
+    margin-right: 10%;
+    margin-top: 5%;
+    margin-bottom: 5%;
+}
+.section3{
+    margin-left: 10%;
+    margin-right: 10%;
+    margin-top: 5%;
+    margin-bottom: 5%;
+}
+    
+
+      
+    .text-big{
+        text-align: center;
+        font-size: 30px;
+    }
+
+    .text-small{
+        text-align: center;
+        font-size: 18px;
+    }
+
+    .buttons{
+        text-align: center;
+        
+    }
+
+    .btn{
+        margin: 0;
+    }
+
+   
+
+    
+    .container{
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        padding: 5px;
+    }
+    
+    .sec1{
+        display: flex;
+        flex-direction: row;
+        justify-content:center;
+        align-items: center;
+     
+     }
+    
+     .logo-footer{
+        width: 20%;
+        display: flex;
+        align-items: center;
+    
+     }
+    
+     .logo-footer img{
+        width: 90%;
+        border: 3px solid white;
+        border-radius: 10px
+    }
+    
+    .useless-text{
+        font-size: 11px;
+        padding-left: 10px;
+        }
+    
+
+        .site-name {
+            width: 51%;
+            font-size: 10px;
+        }
+
+
+    
+     .social-links{
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        width: 80%;
+    
+     }
+
+     
+        
+         .log1{
+            padding-left: 4px;
+            padding-right: 4px;
+            border-radius: 50%;
+        }
+        .log2{
+            border-radius: 50%;
+            padding-left: 4px;
+            padding-right: 4px;
+        }
+        .log3{
+            border-radius: 50%;
+            padding-left: 4px;
+            padding-right: 4px;
+        }
+        .log4{
+            border-radius: 50%;
+            padding-left: 4px;
+            padding-right: 4px;
+        }
+         
+        
+
+        .a-1 .log1 img{
+            height: 40px;
+            width: 40px;
+        
+        }
+
+        
+        .a-2 .log2 img{
+            height: 40px;
+            width: 40px;
+        
+        }
+
+        .a-3 .log3 img{
+            height: 40px;
+            width: 40px;
+        
+        }
+
+        .a-4 .log4 img{
+            height: 40px;
+            width: 40px;
+        
+        }
+        
+    
+   
+        .log1 img , .log2 img ,.log3 img,.log4 img {
+            border-radius: 50%;
+        }
+
+
+ }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/* 
+
+
+ @media screen and (max-width: 480px){
+    .container{
+      margin: 10$ 0;
+    }
+    form{
+      width: 268px
+    }
+    header{
+      width: 268px;
+    }
+    #title{
+      font-size: 1.35em;
+      padding: 5px;
+    }
+    
+    #description{
+      padding-bottom: 5%;
+    }
+  } */

static/styleChatBotUI.css

@@ -0,0 +1,868 @@
+/* Chatbot UI Stylesheet */
+/* This stylesheet is designed to create a modern and user-friendly chatbot interface. */
+body {
+    /* background-color: #f5f5f5; */
+    /* background-image: url(/vecteezy_modern-simple-abstract-pattern_.jpg); */
+    background-color: hsl(47.1, 69%, 90%);
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+.chat-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    background: linear-gradient(to right top, #dfc665, #6ceb8c);
+    border-radius: 15px;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
+    height: 90vh;
+    display: flex;
+    flex-direction: column;
+}
+.chat-header {
+    padding: 15px 20px;
+    border-bottom: 1px solid #eaeaea;
+    background: linear-gradient(to bottom top,  #6ceb8c,#dfc665);
+    border-top-left-radius: 15px;
+    border-top-right-radius: 15px;
+}
+.chat-body {
+    flex: 1;
+    overflow-y: auto;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+}
+.chat-footer {
+    padding: 15px;
+    border-top: 1px solid #eaeaea;
+    background: linear-gradient(to top bottom ,#dfc665,#6ceb8c);
+    border-bottom-left-radius: 15px;
+    border-bottom-right-radius: 15px;
+}
+.message {
+    max-width: 80%;
+    margin-bottom: 15px;
+    padding: 10px 15px;
+    border-radius: 15px;
+    position: relative;
+}
+.user-message {
+    background-color: #e3f2fd;
+    color: #000;
+    align-self: flex-end;
+    border-bottom-right-radius: 0;
+}
+.assistant-message {
+    background-color: #f5f5f5;
+    color: #000;
+    align-self: flex-start;
+    border-bottom-left-radius: 0;
+}
+.agent-tag {
+    display: inline-block;
+    background-color: #ebf5ff;
+    color: #0d6efd;
+    padding: 2px 8px;
+    border-radius: 10px;
+    font-size: 0.8em;
+    font-weight: bold;
+    margin-bottom: 5px;
+}
+.message-input {
+    border-radius: 20px;
+    padding: 10px 15px;
+    resize: none;
+}
+.file-upload-container {
+    position: relative;
+    overflow: hidden;
+    display: inline-block;
+}
+.file-upload-btn {
+    border: none;
+    color: white;
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    cursor: pointer;
+}
+.file-upload-input {
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    padding: 0;
+    font-size: 20px;
+    cursor: pointer;
+    opacity: 0;
+    filter: alpha(opacity=0);
+}
+.preview-container {
+    margin-top: 10px;
+    display: none;
+}
+.preview-voice {
+    max-width: 100px;
+    max-height: 100px;
+    border-radius: 5px;
+}
+.result-image {
+    max-width: 300px;
+    max-height: 300px;
+    border-radius: 5px;
+    margin-top: 10px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+.image-side-by-side {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    margin-top: 10px;
+}
+.image-container {
+    flex: 1;
+    min-width: 200px;
+}
+.image-caption {
+    font-size: 0.85em;
+    text-align: center;
+    margin-top: 5px;
+    color: #666;
+}
+.thinking {
+    display: flex;
+    align-items: center;
+    padding: 10px;
+}
+.dot {
+    height: 8px;
+    width: 8px;
+    margin-right: 5px;
+    background-color: #0d6efd;
+    border-radius: 50%;
+    display: inline-block;
+    animation: pulse 1.5s infinite ease-in-out;
+}
+.dot:nth-child(2) {
+    animation-delay: 0.3s;
+}
+.dot:nth-child(3) {
+    animation-delay: 0.6s;
+}
+@keyframes pulse {
+    0% { transform: scale(0.8); opacity: 0.5; }
+    50% { transform: scale(1.2); opacity: 1; }
+    100% { transform: scale(0.8); opacity: 0.5; }
+}
+.sidebar {
+    background: linear-gradient(to right top, #dfc665, #6ceb8c);
+    padding: 20px;
+    border-radius: 15px;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
+    height: 90vh;
+    overflow-y: auto;
+}
+.sidebar h5 {
+    margin-bottom: 15px;
+    border-bottom: 1px solid #eaeaea;
+    padding-bottom: 10px;
+}
+.agent-info {
+    margin-bottom: 15px;
+}
+.agent-info h6 {
+    color: #0d6efd;
+}
+
+.welcome{
+    font-size: x-large;
+}
+.list-group{
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+    --bs-list-group-border-color: none;
+}
+.list-group-item {
+    background-color: transparent;
+   
+}
+.card-btn{
+    background-color:#646e3a; 
+    border-color:#646e3a;
+    border-radius: 4px;
+    color: aliceblue;
+
+
+}
+.card-btn:hover {
+color: var(--bs-btn-hover-color);
+background-color: #242427;
+border-color:
+#242427;
+}
+
+
+
+
+.structured-response {
+    line-height: 1.6;
+}
+
+.structured-response .empathy-section {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    padding: 15px;
+    border-radius: 8px;
+    margin-bottom: 15px;
+    border-left: 4px solid #4a69bd;
+}
+
+.structured-response .solution-section {
+    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+    color: white;
+    padding: 15px;
+    border-radius: 8px;
+    margin-bottom: 15px;
+    border-left: 4px solid #eb4d4b;
+}
+
+.structured-response .recommendations-section {
+    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+    color: white;
+    padding: 15px;
+    border-radius: 8px;
+    margin-bottom: 15px;
+    border-left: 4px solid #0abde3;
+}
+
+.structured-response .section-title {
+    font-weight: bold;
+    font-size: 1.1em;
+    margin-bottom: 8px;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+}
+
+.message-content ul {
+    padding-left: 20px;
+}
+
+.message-content li {
+    margin-bottom: 5px;
+}
+
+/* Add these styles to styleChatBotUI.css */
+
+/* Assessment Summary Styles */
+.assessment-summary {
+    background: #f8f9fa;
+    border-radius: 10px;
+    padding: 15px;
+    margin: 15px 0;
+    border: 1px solid #e9ecef;
+}
+
+.assessment-summary h4 {
+    color: #495057;
+    margin-bottom: 15px;
+    font-size: 16px;
+    border-bottom: 2px solid #667eea;
+    padding-bottom: 5px;
+}
+
+.assessment-summary h5 {
+    color: #6c757d;
+    font-size: 14px;
+    margin: 10px 0 8px 0;
+    font-weight: 600;
+}
+
+.basic-info ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.basic-info li {
+    padding: 4px 0;
+    font-size: 13px;
+    border-bottom: 1px solid #f1f3f4;
+}
+
+.basic-info li:last-child {
+    border-bottom: none;
+}
+
+.score-summary {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.score-item {
+    display: flex;
+    flex-direction: column;
+    background: white;
+    padding: 8px;
+    border-radius: 6px;
+    border: 1px solid #e9ecef;
+}
+
+.test-name {
+    font-weight: 600;
+    font-size: 12px;
+    color: #495057;
+}
+
+.score {
+    font-size: 11px;
+    color: #6c757d;
+}
+
+.level {
+    font-size: 11px;
+    padding: 2px 6px;
+    border-radius: 4px;
+    margin-top: 4px;
+    font-weight: 500;
+}
+
+.level.normal {
+    background: #d4edda;
+    color: #155724;
+}
+
+.level.concern {
+    background: #fff3cd;
+    color: #856404;
+}
+
+.overall-status {
+    margin-top: 15px;
+}
+
+.status {
+    padding: 8px;
+    border-radius: 6px;
+    font-size: 13px;
+    font-weight: 500;
+    text-align: center;
+}
+
+.status.normal {
+    background: #d4edda;
+    color: #155724;
+    border: 1px solid #c3e6cb;
+}
+
+.status.alert {
+    background: #fff3cd;
+    color: #856404;
+    border: 1px solid #ffeaa7;
+}
+
+.emergency-alert {
+    background: #f8d7da;
+    border: 1px solid #f5c6cb;
+    border-radius: 6px;
+    padding: 10px;
+    margin-top: 15px;
+}
+
+.emergency-alert h5 {
+    color: #721c24;
+    margin-bottom: 8px;
+}
+
+.emergency-alert p {
+    color: #721c24;
+    font-size: 12px;
+    margin-bottom: 8px;
+}
+
+.emergency-alert ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.emergency-alert li {
+    color: #721c24;
+    font-size: 11px;
+    padding: 2px 0;
+}
+
+.no-assessment {
+    text-align: center;
+    padding: 20px;
+    color: #6c757d;
+}
+
+.no-assessment p {
+    margin-bottom: 15px;
+    font-size: 14px;
+}
+
+.guest-info {
+    text-align: center;
+    padding: 20px;
+    color: #6c757d;
+}
+
+.guest-info h3 {
+    color: #495057;
+    margin-bottom: 10px;
+}
+
+.guest-info p {
+    margin-bottom: 15px;
+    font-size: 14px;
+}
+
+/* Add these styles to static/styleChatBotUI.css */
+
+/* Assessment Summary Styles */
+.assessment-summary {
+    background: #f8f9fa;
+    border-radius: 10px;
+    padding: 15px;
+    margin: 15px 0;
+    border: 1px solid #e9ecef;
+}
+
+.assessment-summary h4 {
+    color: #495057;
+    margin-bottom: 15px;
+    font-size: 16px;
+    border-bottom: 2px solid #667eea;
+    padding-bottom: 5px;
+}
+
+.assessment-summary h5 {
+    color: #6c757d;
+    font-size: 14px;
+    margin: 10px 0 8px 0;
+    font-weight: 600;
+}
+
+.basic-info ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.basic-info li {
+    padding: 4px 0;
+    font-size: 13px;
+    border-bottom: 1px solid #f1f3f4;
+}
+
+.basic-info li:last-child {
+    border-bottom: none;
+}
+
+.score-summary {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.score-item {
+    display: flex;
+    flex-direction: column;
+    background: white;
+    padding: 8px;
+    border-radius: 6px;
+    border: 1px solid #e9ecef;
+}
+
+.test-name {
+    font-weight: 600;
+    font-size: 12px;
+    color: #495057;
+}
+
+.score {
+    font-size: 11px;
+    color: #6c757d;
+}
+
+.level {
+    font-size: 11px;
+    padding: 2px 6px;
+    border-radius: 4px;
+    margin-top: 4px;
+    font-weight: 500;
+}
+
+.level.normal {
+    background: #d4edda;
+    color: #155724;
+}
+
+.level.concern {
+    background: #fff3cd;
+    color: #856404;
+}
+
+.overall-status .status.normal {
+    background: #d4edda;
+    color: #155724;
+    border: 1px solid #c3e6cb;
+}
+
+.overall-status .status.alert {
+    background: #fff3cd;
+    color: #856404;
+    border: 1px solid #ffeaa7;
+}
+
+.emergency-alert {
+    background: #f8d7da;
+    border: 1px solid #f5c6cb;
+    border-radius: 6px;
+    padding: 10px;
+    margin-top: 15px;
+}
+
+.emergency-alert h5 {
+    color: #721c24;
+    margin-bottom: 8px;
+}
+
+.emergency-alert p {
+    color: #721c24;
+    font-size: 12px;
+    margin-bottom: 8px;
+}
+
+.emergency-alert ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.emergency-alert li {
+    color: #721c24;
+    font-size: 11px;
+    padding: 2px 0;
+}
+
+.no-assessment {
+    text-align: center;
+    padding: 20px;
+    color: #6c757d;
+}
+
+.guest-info {
+    text-align: center;
+    padding: 20px;
+    color: #6c757d;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .assessment-summary {
+        padding: 10px;
+        margin: 10px 0;
+    }
+    
+    .assessment-summary h4 {
+        font-size: 14px;
+    }
+    
+    .basic-info li {
+        font-size: 12px;
+    }
+}
+
+/* Add to static/styleChatBotUI.css */
+
+.user-status {
+    background: #f8f9fa;
+    padding: 12px;
+    border-radius: 8px;
+    margin: 15px 0;
+    border: 1px solid #e9ecef;
+}
+
+.user-status .badge {
+    font-size: 0.85em;
+    padding: 4px 8px;
+}
+
+.badge.bg-success {
+    background-color: #28a745 !important;
+    color: white;
+}
+
+.badge.bg-warning {
+    background-color: #ffc107 !important;
+    color: #212529 !important;
+}
+
+.assessment-summary {
+    background: #ffffff;
+    border: 1px solid #e3f2fd;
+    border-radius: 10px;
+    padding: 15px;
+    margin: 15px 0;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.assessment-summary h4 {
+    color: #1976d2;
+    margin-bottom: 15px;
+    font-size: 1.1em;
+}
+
+.assessment-summary h5 {
+    color: #424242;
+    margin: 10px 0 5px 0;
+    font-size: 0.95em;
+}
+
+.basic-info ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.basic-info li {
+    padding: 4px 0;
+    border-bottom: 1px solid #f0f0f0;
+    font-size: 0.9em;
+}
+
+.basic-info li:last-child {
+    border-bottom: none;
+}
+
+.score-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px 12px;
+    background: #f8f9fa;
+    border-radius: 6px;
+    margin: 5px 0;
+    border-left: 3px solid #17a2b8;
+}
+
+.test-name {
+    font-weight: 600;
+    color: #495057;
+    font-size: 0.85em;
+}
+
+.score {
+    font-weight: bold;
+    color: #007bff;
+    font-size: 0.9em;
+}
+
+.level {
+    padding: 2px 8px;
+    border-radius: 12px;
+    font-size: 0.75em;
+    font-weight: 600;
+    text-transform: uppercase;
+}
+
+.level.normal {
+    background: #d4edda;
+    color: #155724;
+}
+
+.level.concern {
+    background: #f8d7da;
+    color: #721c24;
+}
+
+.overall-status {
+    margin: 15px 0;
+    text-align: center;
+}
+
+.status {
+    padding: 10px;
+    border-radius: 8px;
+    font-weight: 600;
+    font-size: 0.9em;
+}
+
+.status.normal {
+    background: #d4edda;
+    color: #155724;
+    border: 1px solid #c3e6cb;
+}
+
+.status.alert {
+    background: #f8d7da;
+    color: #721c24;
+    border: 1px solid #f5c6cb;
+}
+
+.emergency-alert {
+    background: #fff3cd;
+    border: 1px solid #ffeaa7;
+    border-radius: 8px;
+    padding: 12px;
+    margin: 15px 0;
+}
+
+.emergency-alert h5 {
+    color: #856404;
+    margin-bottom: 8px;
+}
+
+.emergency-alert ul {
+    margin: 8px 0 0 20px;
+    font-size: 0.85em;
+}
+
+.assessment-actions {
+    text-align: center;
+    margin-top: 15px;
+    padding-top: 15px;
+    border-top: 1px solid #e9ecef;
+}
+
+.assessment-actions .btn {
+    font-size: 0.85em;
+    padding: 6px 12px;
+}
+
+.no-assessment {
+    background: #f8f9fa;
+    padding: 20px;
+    border-radius: 8px;
+    text-align: center;
+    margin: 15px 0;
+    border: 1px dashed #dee2e6;
+}
+
+.no-assessment p {
+    color: #6c757d;
+    margin-bottom: 15px;
+    font-size: 0.9em;
+}
+
+.guest-info {
+    background: #e3f2fd;
+    padding: 20px;
+    border-radius: 8px;
+    text-align: center;
+    margin: 15px 0;
+    border: 1px solid #bbdefb;
+}
+
+.guest-info h3 {
+    color: #1976d2;
+    margin-bottom: 10px;
+}
+
+.guest-info p {
+    color: #424242;
+    margin-bottom: 15px;
+    font-size: 0.9em;
+}
+
+.sidebar-actions {
+    border-top: 2px solid #e9ecef;
+    padding-top: 15px;
+}
+
+.sidebar-actions .btn {
+    font-size: 0.9em;
+    font-weight: 500;
+    border: 2px solid;
+    transition: all 0.3s ease;
+}
+
+.sidebar-actions .btn:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+
+  #delete-account {
+        transition: all 0.3s ease;
+        border: 2px solid #dc3545 !important;
+        color: #dc3545 !important;
+        background-color: transparent;
+    }
+    
+    #delete-account:hover {
+        background-color: #dc3545 !important;
+        color: white !important;
+        transform: translateY(-1px);
+        box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3);
+    }
+    
+    #delete-account:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+        transform: none;
+        box-shadow: none;
+    }
+    
+    /* Warning styling for delete confirmation */
+    .delete-warning {
+        border: 2px solid #dc3545;
+        background-color: #f8d7da;
+        color: #721c24;
+        padding: 15px;
+        border-radius: 8px;
+        margin: 10px 0;
+    }
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .assessment-summary {
+        padding: 10px;
+        margin: 10px 0;
+    }
+    
+    .assessment-summary h4 {
+        font-size: 1em;
+    }
+    
+    .basic-info li {
+        font-size: 0.85em;
+    }
+    
+    .score-item {
+        padding: 6px 8px;
+    }
+    
+    .test-name, .score {
+        font-size: 0.8em;
+    }
+    
+    .level {
+        font-size: 0.7em;
+        padding: 1px 6px;
+    }
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .assessment-summary {
+        padding: 10px;
+        margin: 10px 0;
+    }
+    
+    .assessment-summary h4 {
+        font-size: 14px;
+    }
+    
+    .basic-info li {
+        font-size: 12px;
+    }
+}
+
+
+@media (max-width: 768px) {
+    .sidebar {
+        height: auto;
+        margin-bottom: 15px;
+    }
+}

static/styleabout.css

@@ -0,0 +1,245 @@
+
+@import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');
+
+*{
+
+    margin: 0;
+    padding: 0;
+}
+
+/* 
+scroller for crome AND INTERNET explorer */
+
+
+::-webkit-scrollbar{
+    width: 2em;
+}
+
+
+::-webkit-scrollbar-track{
+background: hsl(174 72% 56% / 1);
+ border-radius: 100vw;
+margin-block: .1em;
+}
+::-webkit-scrollbar-thumb{
+background: hsl(120 20% 30% / 1);
+border-radius: 100vw;
+border: .25em solid   hsl(174 72% 56% / 1);
+}
+::-webkit-scrollbar-thumb:hover{
+background: hsl(120 20% 10% / 1);
+}
+
+
+
+
+/* scroller for firefox  */
+
+@supports(scrollbar-color:rgb(11, 29, 15)  rgb(51, 235, 171) ){
+
+*{
+scrollbar-color: rgb(11, 29, 15)   rgb(51, 235, 171)  ;
+scrollbar-width: auto;
+scrollbar-arrow-color: #4b5b39;
+
+
+}
+
+}
+
+
+
+
+
+
+html{
+    scroll-behavior: smooth;
+}
+
+
+.logo{
+    width: 30%;
+    display: flex;
+    justify-content: left;
+    align-items: center;
+}
+.logo img{
+    width: 40%;
+    
+
+}
+
+
+nav{
+    padding: 1.5rem;
+    box-sizing: border-box;
+    font-family: sans-serif;
+    
+}
+
+
+.navbar{
+    width: 100%;
+    height: 10vh;
+    background:hsl(86, 82%, 63%);
+    position: sticky;
+    z-index: 3;
+    
+
+
+}
+
+
+.nav-Links{
+    display: flex;
+    list-style: none;
+    gap: 5rem;
+    font-size: 1.2rem;
+
+    width: 100%;
+    display: flex;
+    list-style: none;
+    height: 100%;
+    justify-content: center;
+    align-items: center;
+}
+
+.nav-Links a{
+    text-decoration: none;
+    color:rgb(14, 20, 6); ;
+    /* #be00ff99;color: #ca10fa; */
+    
+    font-size: 18px;
+    font-weight: bold;
+    font-family:  sans-serif;
+    position: relative;
+}
+
+.nav-item{
+    
+    position: relative;
+}
+
+.nav-Links li a::before{
+    content: '';
+    display: block;
+    height: 3.5px;
+    background:rgb(14, 20, 6);;
+    position: absolute;
+    /* top: -.75em;  */
+    bottom: -.75em; 
+    left: 0;
+    right: 0;
+    transform: scale(0,1);
+    /* transform-origin: right; */
+    /* transform-origin: left; */
+    transition: transform ease-in-out 250ms;
+
+}
+
+.nav-Links li a:hover:before{
+    transform: scale(1,1);
+
+}
+
+
+
+
+
+.background1{
+  /*  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/308367/halftone-yellow.png); */
+  background: linear-gradient(to right top, #65dfc9, #6cdbeb);
+
+
+}
+
+
+
+
+.text-big{
+
+    padding: 1rem;
+    border-radius: 10px;
+    text-align: center;
+    font-size: 41px;
+    font-family: 'Ubuntu', sans-serif;
+    margin: 1%
+   
+
+}
+
+.text-small{
+    font-size: 18px;
+    margin: 5%;
+    text-align: center;
+    background: #b2dcb1;
+    border-radius: 10px;
+}
+
+
+
+
+/* body or section starts from here */
+
+
+.firstsection{
+height: 120vh;
+display: flex;
+flex-direction: row;
+justify-content: center;
+
+/* background: linear-gradient(to right top, #65dfc9, #6cdbeb); */
+background: linear-gradient(to right top, #dfc665, #6ceb8c);
+}
+
+
+.box{
+    margin:auto;
+width: 1200px;
+height: 600px;
+/*background:linear-gradient(to right top, #83ebd887, #83c0e9f0);*/
+background: linear-gradient(to right bottom, 
+rgba(255,225,225,0.7),
+rgba(255,225,225,0.3));
+z-index: 2;
+position: relative;
+border-radius: 75px;
+box-shadow: 0 0.25em 2em -2em black,
+ 0 40px 0 -20px  rgba(255,225,225,0.8) ;
+ 
+display: flex;
+flex-direction: row;
+justify-content: center;
+align-items: center;
+}
+
+
+
+.first{
+    width: 80%;
+    height: 75%;
+    /* text-align: center; */
+  
+    
+
+ 
+}
+
+.first h1{
+    font-size: 2.7rem;
+    font-weight: 50;
+    margin: 2rem;
+    font-family: 'Ubuntu', sans-serif;
+    color: #4b5b39;
+    text-align: center;
+}
+
+.first p{
+    font-family: 'Ubuntu', sans-serif;
+    font-size: 1.4rem;
+    margin-top: 2rem;
+    color: rgb(84, 80, 80);
+   line-height: 1.6em;
+    
+}
+

static/styleassessment.css

@@ -0,0 +1,470 @@
+
+@import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');
+
+*{
+
+    margin: 0;
+    padding: 0;
+
+}
+
+/* 
+scroller for crome AND INTERNET explorer */
+
+
+    ::-webkit-scrollbar{
+        width: 2em;
+    }
+
+
+::-webkit-scrollbar-track{
+   background: hsl(174 72% 56% / 1);
+     border-radius: 100vw;
+   margin-block: .1em;
+}
+::-webkit-scrollbar-thumb{
+    background: hsl(120 20% 30% / 1);
+    border-radius: 100vw;
+    border: .25em solid   hsl(174 72% 56% / 1);
+}
+::-webkit-scrollbar-thumb:hover{
+    background: hsl(120 20% 10% / 1);
+}
+
+
+
+
+/* scroller for firefox  */
+
+@supports(scrollbar-color:rgb(11, 29, 15)  rgb(51, 235, 171) ){
+
+*{
+    scrollbar-color: rgb(11, 29, 15)   rgb(51, 235, 171)  ;
+    scrollbar-width: auto;
+    scrollbar-arrow-color: #4b5b39;
+    
+  
+}
+
+}
+
+
+
+html{
+    scroll-behavior: smooth;
+    
+}
+
+/* CSS of Navbar start */
+
+
+.logo{
+    width: 30%;
+    display: flex;
+    justify-content: left;
+    align-items: center;
+}
+.logo img{
+    width: 40%;
+    
+
+}
+
+
+nav{
+    padding: 1.5rem;
+    box-sizing: border-box;
+    font-family: sans-serif;
+    
+}
+
+
+.navbar{
+    width: 100%;
+    height: 10vh;
+    background:hsl(86, 82%, 63%);
+    position: sticky;
+    z-index: 3;
+    
+
+
+}
+
+
+.nav-Links{
+    display: flex;
+    list-style: none;
+    gap: 5rem;
+    font-size: 1.2rem;
+
+    width: 100%;
+    display: flex;
+    list-style: none;
+    height: 100%;
+    justify-content: center;
+    align-items: center;
+}
+
+.nav-Links a{
+    text-decoration: none;
+    color:rgb(14, 20, 6); ;
+    /* #be00ff99;color: #ca10fa; */
+    
+    font-size: 18px;
+    font-weight: bold;
+    font-family:  sans-serif;
+    position: relative;
+}
+
+.nav-item{
+    
+    position: relative;
+}
+
+.nav-Links li a::before{
+    content: '';
+    display: block;
+    height: 3.5px;
+    background:rgb(14, 20, 6);;
+    position: absolute;
+    /* top: -.75em;  */
+    bottom: -.75em; 
+    left: 0;
+    right: 0;
+    transform: scale(0,1);
+    /* transform-origin: right; */
+    /* transform-origin: left; */
+    transition: transform ease-in-out 250ms;
+
+}
+
+.nav-Links li a:hover:before{
+    transform: scale(1,1);
+
+}
+
+/* CSS of Navbar end */
+
+
+
+
+/* CSS of form section starts */
+.form-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.left-section, .right-section {
+    width: 50%;
+}
+.image {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.left-section .image img {
+    width: 70%;
+    height: auto;
+}
+
+.right-section {
+    padding: 20px;
+}
+
+.form-box {
+    border: 1px solid #ccc;
+    border-radius: 10px;
+    padding: 20px;
+    background-color: transparent;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    width: 80%;
+}
+#sub-title {
+    font-size: 24px;
+    margin-bottom: 20px;
+    font-weight: bolder;
+}
+
+
+.form-input {
+    width: 92%;
+    padding: 10px;
+    margin-top: 5px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    font-size: 15px;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background: #fff1f0;
+    text-align: center;
+}
+
+.gender-placeholder {
+    width: 100%;
+}
+
+.btn{
+    display: block;
+    margin: 50px auto;
+    width: fit-content;
+    border: 1px solid #242427;
+    color: aliceblue;
+    padding: 6px 10px;
+    border-radius: 6px;
+    font-family: 'Ubuntu', sans-serif;
+    text-decoration: none;
+    color: #242427;
+    cursor: pointer;
+  
+    /* We need this to position
+        span inside button */
+    position: relative;
+    overflow: hidden;
+    box-shadow: 6px 7px 40px -4px 
+             rgba(0, 0, 0, 0.2);
+
+}
+.btn-primary {
+    background-color:#646e3a; 
+    color: white;
+    border: none;
+    font-size: medium;
+    padding: 10px 15px;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+.btn-primary:hover {
+    background-color: #242427;
+    color: white;
+}
+/* CSS of form section starts */
+
+.firstsection{
+     height: 90vh;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    padding: 4rem 4rem;
+    align-items: center;
+    font-family: 'Ubuntu', sans-serif;
+    background: linear-gradient(to right top, #dfc665, #6ceb8c);
+    }
+    
+    
+    .box{
+        margin:auto;
+    width: 1200px;
+    height: fit-content;
+    /*background:linear-gradient(to right top, #83ebd887, #83c0e9f0);*/
+    background: linear-gradient(to right bottom, 
+    rgba(255,225,225,0.7),
+    rgba(255,225,225,0.3));
+    z-index: 2;
+    position: relative;
+    border-radius: 75px;
+    box-shadow: 0 0.25em 2em -2em black,
+     0 40px 0 -20px  rgba(255,225,225,0.8) ;
+     
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    }
+    
+    
+    
+    .first{
+        width: 80%;
+        height: 75%;
+     
+    }
+
+  
+  .container{
+    width: 100%;
+    align-items: center;
+    /* margin: 3.5em auto 0 0.8em; */
+  }
+  
+  form{
+    display: flex;
+    flex-direction: column;
+    justify-content: left;
+    align-items: start;
+    line-height: 1 rem;
+   
+    
+    
+    
+  }
+  
+  #title{
+    font-size: 2em;
+    font-family: 'Ubuntu', sans-serif;
+    font-weight: 50;
+  }
+  
+  
+  header{
+
+    margin: 2rem;
+    color: #4b5b39;
+    text-align: center;
+
+  }
+
+
+    
+#survey-form{
+    color: #4b5b39;
+    font-family: 'Ubuntu', sans-serif;
+    font-size: 1.1em;
+    font-weight: 50;
+    align-items: center;
+
+}
+
+
+
+/* Scrollable question area for each section */
+.row {
+    max-height: 350px;      /* Adjust height as needed */
+    overflow-y: auto;
+    padding-right: 10px;    /* For scrollbar space */
+    margin-bottom: 18px;
+    /* Optional: smooth scrolling */
+    scroll-behavior: smooth;
+}
+
+/* Optional: Custom scrollbar styling for Chrome/Edge */
+.row::-webkit-scrollbar {
+    width: 8px;
+}
+.row::-webkit-scrollbar-thumb {
+    background: #b5fffc;
+    border-radius: 4px;
+}
+.row::-webkit-scrollbar-track {
+    background: #f0f0f0;
+    border-radius: 4px;
+}
+
+/* Optional: Custom scrollbar for Firefox */
+.row {
+    scrollbar-width: thin;
+    scrollbar-color: #b5fffc #f0f0f0;
+       align-items: center;
+}
+
+.section-title {
+
+  font-size: 18px;
+font-family: 'Ubuntu', sans-serif;
+  background: #c1d06f;
+  width: inherit;
+  font-weight: bold;
+  margin-bottom: 6px;
+  text-align: center;
+  padding: 2px;
+  border-radius: 6px;
+}
+
+  
+
+.basic-info{
+    display: flex;
+    flex-direction: row;
+}
+  
+.gender{
+    display: flex;
+    flex-direction: row;
+}
+.gender-placeholder{
+    text-align: center;
+    color: #4b5b39;;
+}
+
+
+.question-section{
+
+    display: flex;
+    width: 50%;
+    flex-direction: column;
+    align-items: left;
+}
+
+/* .question{
+    padding-bottom: 0.5em;
+} */
+
+.rating{
+    display: flex;
+    flex-direction: column;
+}
+
+.bascic-info{
+    padding: 2px;
+}
+
+.form-control {
+  /* height: 5vh; */
+  width: fit-content;
+  font-size: 15px;
+  border: 2px solid gray;
+  border-radius: 6px;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  background: #fff1f0;
+  text-align: center;
+  margin-left: 6px;
+  padding: 6px;
+  box-sizing: border-box;
+  transition: border-color 0.3s ease;
+}
+
+
+/* .btn:hover{
+    background:#4b5b39;
+} */
+
+
+
+.btn span {
+	position: absolute;
+	border-radius: 50%;
+	/* To make it round */
+	background-color: rgba(0, 0, 0, 0.3);
+	width: 100px;
+	height: 100px;
+	margin-top: -50px;
+	/* for positioning */
+	margin-left: -50px;
+	animation: ripple 1s;
+	opacity: 0;
+}
+/* Add animation */
+@keyframes ripple {
+	from {
+		opacity: 1;
+		transform: scale(0);
+	}
+	to {
+		opacity: 0;
+		transform: scale(10);
+	}
+}
+
+  
+
+
+
+
+/* CSS of form section end */
+  
+
+    
+
+    
+    

static/stylehome.css

@@ -0,0 +1,470 @@
+
+@import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');
+
+*{
+
+    margin: 0;
+    padding: 0;
+
+}
+
+/* 
+scroller for crome AND INTERNET explorer */
+
+
+    ::-webkit-scrollbar{
+        width: 2em;
+    }
+
+
+::-webkit-scrollbar-track{
+   background: hsl(174 72% 56% / 1);
+     border-radius: 100vw;
+   margin-block: .1em;
+}
+::-webkit-scrollbar-thumb{
+    background: hsl(120 20% 30% / 1);
+    border-radius: 100vw;
+    border: .25em solid   hsl(174 72% 56% / 1);
+}
+::-webkit-scrollbar-thumb:hover{
+    background: hsl(120 20% 10% / 1);
+}
+
+
+
+
+/* scroller for firefox  */
+
+@supports(scrollbar-color:rgb(11, 29, 15)  rgb(51, 235, 171) ){
+
+*{
+    scrollbar-color: rgb(11, 29, 15)   rgb(51, 235, 171)  ;
+    scrollbar-width: auto;
+    scrollbar-arrow-color: #4b5b39;
+    
+  
+}
+
+}
+
+
+
+html{
+    scroll-behavior: smooth;
+    
+}
+
+/* CSS of Navbar start */
+
+
+.logo{
+    width: 30%;
+    display: flex;
+    justify-content: left;
+    align-items: center;
+}
+.logo img{
+    width: 40%;
+    
+
+}
+
+
+nav{
+    padding: 1.5rem;
+    box-sizing: border-box;
+    font-family: sans-serif;
+    
+}
+
+
+.navbar{
+    width: 100%;
+    height: 10vh;
+    background:hsl(86, 82%, 63%);
+    position: sticky;
+    z-index: 3;
+    
+
+
+}
+
+
+.nav-Links{
+    display: flex;
+    list-style: none;
+    gap: 5rem;
+    font-size: 1.2rem;
+
+    width: 100%;
+    display: flex;
+    list-style: none;
+    height: 100%;
+    justify-content: center;
+    align-items: center;
+}
+
+.nav-Links a{
+    text-decoration: none;
+    color:rgb(14, 20, 6); ;
+    /* #be00ff99;color: #ca10fa; */
+    
+    font-size: 18px;
+    font-weight: bold;
+    font-family:  sans-serif;
+    position: relative;
+}
+
+.nav-item{
+    
+    position: relative;
+}
+
+.nav-Links li a::before{
+    content: '';
+    display: block;
+    height: 3.5px;
+    background:rgb(14, 20, 6);;
+    position: absolute;
+    /* top: -.75em;  */
+    bottom: -.75em; 
+    left: 0;
+    right: 0;
+    transform: scale(0,1);
+    /* transform-origin: right; */
+    /* transform-origin: left; */
+    transition: transform ease-in-out 250ms;
+
+}
+
+.nav-Links li a:hover:before{
+    transform: scale(1,1);
+
+}
+
+/* CSS of Navbar end */
+
+
+
+
+/* CSS of form section starts */
+.form-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.left-section, .right-section {
+    width: 50%;
+}
+.image {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.left-section .image img {
+    width: 70%;
+    height: auto;
+}
+
+.right-section {
+    padding: 20px;
+}
+
+.form-box {
+    border: 1px solid #ccc;
+    border-radius: 10px;
+    padding: 20px;
+    background-color: transparent;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    width: 80%;
+}
+#sub-title {
+    font-size: 24px;
+    margin-bottom: 20px;
+    font-weight: bolder;
+}
+
+
+.form-input {
+    width: 92%;
+    padding: 10px;
+    margin-top: 5px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    font-size: 15px;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background: #fff1f0;
+    text-align: center;
+}
+
+.gender-placeholder {
+    width: 100%;
+}
+
+.btn{
+    display: block;
+    margin: 50px auto;
+    width: fit-content;
+    border: 1px solid #242427;
+    color: aliceblue;
+    padding: 6px 10px;
+    border-radius: 6px;
+    font-family: 'Ubuntu', sans-serif;
+    text-decoration: none;
+    color: #242427;
+    cursor: pointer;
+  
+    /* We need this to position
+        span inside button */
+    position: relative;
+    overflow: hidden;
+    box-shadow: 6px 7px 40px -4px 
+             rgba(0, 0, 0, 0.2);
+
+}
+.btn-primary {
+    background-color:#646e3a; 
+    color: white;
+    border: none;
+    font-size: medium;
+    padding: 10px 15px;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+.btn-primary:hover {
+    background-color: #242427;
+    color: white;
+}
+/* CSS of form section starts */
+
+.firstsection{
+    height: fit-content;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    padding: 2rem 2rem;
+    align-items: center;
+    font-family: 'Ubuntu', sans-serif;
+    background: linear-gradient(to right top, #dfc665, #6ceb8c);
+    }
+    
+    
+    .box{
+        margin:auto;
+    width: 1200px;
+    height: fit-content;
+    /*background:linear-gradient(to right top, #83ebd887, #83c0e9f0);*/
+    background: linear-gradient(to right bottom, 
+    rgba(255,225,225,0.7),
+    rgba(255,225,225,0.3));
+    z-index: 2;
+    position: relative;
+    border-radius: 75px;
+    box-shadow: 0 0.25em 2em -2em black,
+     0 40px 0 -20px  rgba(255,225,225,0.8) ;
+     
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    }
+    
+    
+    
+    .first{
+        width: 80%;
+        height: 75%;
+     
+    }
+
+  
+  .container{
+    width: 100%;
+    align-items: center;
+    /* margin: 3.5em auto 0 0.8em; */
+  }
+  
+  form{
+    display: flex;
+    flex-direction: column;
+    justify-content: left;
+    align-items: start;
+    line-height: 1 rem;
+   
+    
+    
+    
+  }
+  
+  #title{
+    font-size: 2em;
+    font-family: 'Ubuntu', sans-serif;
+    font-weight: 50;
+  }
+  
+  
+  header{
+
+    margin: 2rem;
+    color: #4b5b39;
+    text-align: center;
+
+  }
+
+
+    
+#survey-form{
+    color: #4b5b39;
+    font-family: 'Ubuntu', sans-serif;
+    font-size: 1.1em;
+    font-weight: 50;
+    align-items: center;
+
+}
+
+
+
+/* Scrollable question area for each section */
+.row {
+    max-height: 350px;      /* Adjust height as needed */
+    overflow-y: auto;
+    padding-right: 10px;    /* For scrollbar space */
+    margin-bottom: 18px;
+    /* Optional: smooth scrolling */
+    scroll-behavior: smooth;
+}
+
+/* Optional: Custom scrollbar styling for Chrome/Edge */
+.row::-webkit-scrollbar {
+    width: 8px;
+}
+.row::-webkit-scrollbar-thumb {
+    background: #b5fffc;
+    border-radius: 4px;
+}
+.row::-webkit-scrollbar-track {
+    background: #f0f0f0;
+    border-radius: 4px;
+}
+
+/* Optional: Custom scrollbar for Firefox */
+.row {
+    scrollbar-width: thin;
+    scrollbar-color: #b5fffc #f0f0f0;
+       align-items: center;
+}
+
+.section-title {
+
+  font-size: 18px;
+font-family: 'Ubuntu', sans-serif;
+  background: #c1d06f;
+  width: inherit;
+  font-weight: bold;
+  margin-bottom: 6px;
+  text-align: center;
+  padding: 2px;
+  border-radius: 6px;
+}
+
+  
+
+.basic-info{
+    display: flex;
+    flex-direction: row;
+}
+  
+.gender{
+    display: flex;
+    flex-direction: row;
+}
+.gender-placeholder{
+    text-align: center;
+    color: #4b5b39;;
+}
+
+
+.question-section{
+
+    display: flex;
+    width: 50%;
+    flex-direction: column;
+    align-items: left;
+}
+
+/* .question{
+    padding-bottom: 0.5em;
+} */
+
+.rating{
+    display: flex;
+    flex-direction: column;
+}
+
+.bascic-info{
+    padding: 2px;
+}
+
+.form-control {
+  /* height: 5vh; */
+  width: fit-content;
+  font-size: 15px;
+  border: 2px solid gray;
+  border-radius: 6px;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  background: #fff1f0;
+  text-align: center;
+  margin-left: 6px;
+  padding: 6px;
+  box-sizing: border-box;
+  transition: border-color 0.3s ease;
+}
+
+
+/* .btn:hover{
+    background:#4b5b39;
+} */
+
+
+
+.btn span {
+	position: absolute;
+	border-radius: 50%;
+	/* To make it round */
+	background-color: rgba(0, 0, 0, 0.3);
+	width: 100px;
+	height: 100px;
+	margin-top: -50px;
+	/* for positioning */
+	margin-left: -50px;
+	animation: ripple 1s;
+	opacity: 0;
+}
+/* Add animation */
+@keyframes ripple {
+	from {
+		opacity: 1;
+		transform: scale(0);
+	}
+	to {
+		opacity: 0;
+		transform: scale(10);
+	}
+}
+
+  
+
+
+
+
+/* CSS of form section end */
+  
+
+    
+
+    
+    

templates/ChatbotUI.html

@@ -0,0 +1,1700 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mental Health Assistant</title>
+    <link rel="icon" type="image/png" href="https://img.icons8.com/fluency/48/chromatography.png">
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link rel="stylesheet" href="../static/styleChatBotUI.css">
+</head>
+<body>
+    <div class="container-fluid py-4">
+        <div class="row">
+            <!-- Sidebar -->
+            <div class="col-md-3 mb-3">
+
+                
+                <div class="sidebar">
+                    <div class="user-info">
+                        {% if session.user_data and session.user_data.name != 'Guest' %}
+                            <div class="user-profile">
+                                <h3>👤 Welcome, {{ session.user_data.name }}!</h3>
+                                
+                                <!-- User Status -->
+                                <div class="user-status">
+                                    <p><strong>Account Status:</strong> 
+                                        {% if session.user_data.has_completed_survey %}
+                                            <span class="badge bg-success">Assessment Complete</span>
+                                        {% else %}
+                                            <span class="badge bg-warning">No Assessment</span>
+                                        {% endif %}
+                                    </p>
+                                    {% if session.user_data.assessment_date %}
+                                    <p><strong>Last Assessment:</strong> {{ session.user_data.assessment_date }}</p>
+                                    {% endif %}
+                                </div>
+                                
+                                <!-- Assessment Information Section -->
+                                {% if session.assessment_data %}
+                                <div class="assessment-summary">
+                                    <h4>📋 Assessment Summary</h4>
+                                    <div class="basic-info">
+                                        <h5>Basic Information:</h5>
+                                        <ul>
+                                            <li><strong>Age:</strong> {{ session.assessment_data.basic_info.age }}</li>
+                                            <li><strong>Gender:</strong> {{ session.assessment_data.basic_info.gender }}</li>
+                                            <li><strong>Location:</strong> {{ session.assessment_data.basic_info.location }}</li>
+                                            <li><strong>Current Mood:</strong> {{ session.assessment_data.basic_info.emotion }}</li>
+                                            {% if session.assessment_data.basic_info.days_indoors %}
+                                            <li><strong>Days Indoors:</strong> {{ session.assessment_data.basic_info.days_indoors }}</li>
+                                            {% endif %}
+                                            {% if session.assessment_data.basic_info.history_of_mental_illness %}
+                                            <li><strong>Mental Health History:</strong> {{ session.assessment_data.basic_info.history_of_mental_illness }}</li>
+                                            {% endif %}
+                                            {% if session.assessment_data.basic_info.treatment %}
+                                            <li><strong>Current Treatment:</strong> {{ session.assessment_data.basic_info.treatment }}</li>
+                                            {% endif %}
+                                        </ul>
+                                    </div>
+                                    
+                                    {% if session.assessment_data.assessment_result and session.assessment_data.assessment_result.detailed_scores %}
+                                    <div class="assessment-scores">
+                                        <h5>Assessment Results:</h5>
+                                        <div class="score-summary">
+                                            {% for test_name, scores in session.assessment_data.assessment_result.detailed_scores.items() %}
+                                            <div class="score-item">
+                                                <span class="test-name">{{ test_name }}:</span>
+                                                <span class="score">{{ scores.score }}/{{ scores.max_score }}</span>
+                                                <div class="level {{ 'concern' if 'severe' in scores.level.lower() or 'moderate' in scores.level.lower() else 'normal' }}">
+                                                    {{ scores.level }}
+                                                </div>
+                                            </div>
+                                            {% endfor %}
+                                        </div>
+                                    </div>
+                                    
+                                    <div class="overall-status">
+                                        <h5>Overall Status:</h5>
+                                        <div class="status {{ 'alert' if 'concern' in session.assessment_data.assessment_result.overall_status.lower() else 'normal' }}">
+                                            {{ session.assessment_data.assessment_result.overall_status }}
+                                        </div>
+                                    </div>
+                                    {% endif %}
+                                    
+                                    {% if session.assessment_data.assessment_result and session.assessment_data.assessment_result.emergency_info %}
+                                    <div class="emergency-alert">
+                                        <h5>⚠️ Important:</h5>
+                                        <p>{{ session.assessment_data.assessment_result.emergency_info.message }}</p>
+                                        <ul>
+                                            {% for resource in session.assessment_data.assessment_result.emergency_info.resources %}
+                                            <li>{{ resource }}</li>
+                                            {% endfor %}
+                                        </ul>
+                                    </div>
+                                    {% endif %}
+                                    
+                                    <div class="assessment-actions">
+                                        <a href="{{ url_for('assessment') }}" class="btn btn-sm btn-outline-primary">
+                                            🔄 Retake Assessment
+                                        </a>
+                                    </div>
+                                </div>
+                                {% else %}
+                                <div class="no-assessment">
+                                    <p>No assessment completed yet.</p>
+                                    <a href="{{ url_for('assessment') }}" class="btn btn-sm btn-outline-primary">Take Assessment</a>
+                                </div>
+                                {% endif %}
+                            </div>
+                        {% else %}
+                            <div class="guest-info">
+                                <h3>👋 Hello, Guest!</h3>
+                                <p>You're using the chatbot as a guest. Sign up to save your assessment and chat history.</p>
+                                <a href="{{ url_for('home') }}" class="btn btn-sm btn-outline-primary">Sign Up for Full Features</a>
+                            </div>
+                        {% endif %}
+                    </div>
+                    
+                    <!-- Action Buttons Section - ONLY ONE SET -->
+                    <div class="sidebar-actions mt-4">
+                        <button id="clear-chat" class="btn btn-outline-danger w-100 mb-2">
+                            <i class="fas fa-trash-alt me-2"></i> Clear Chat
+                        </button>
+                        
+                        {% if session.user_data and session.user_data.name != 'Guest' %}
+                        <button id="clear-history" class="btn btn-outline-warning w-100 mb-2">
+                            <i class="fas fa-history me-2"></i> Clear History
+                        </button>
+                        
+                        <!-- ✅ NEW: Delete Account Button -->
+                        <button id="delete-account" class="btn btn-outline-danger w-100 mb-2" style="border-color: #dc3545; color: #dc3545;">
+                            <i class="fas fa-user-times me-2"></i> Delete Account
+                        </button>
+                        {% endif %}
+                        
+                        <button id="end-session" class="btn btn-outline-secondary w-100">
+                            <i class="fas fa-sign-out-alt me-2"></i> End Session
+                        </button>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Chat Container -->
+            <div class="col-md-9">
+                <div class="chat-container">
+                    <div class="chat-header">
+                        <h5 class="mb-0">
+                            <i class="fas fa-stethoscope me-2"></i>
+                            Multi-Agent Mental Health Assistant Chatbot
+                        </h5>
+                        <small class="text-muted">Ask mental health questions via text or voice</small>
+                    </div>
+                    
+                                        
+                    <div id="chat-body" class="chat-body">
+                        <div class="message assistant-message">
+                            <div class="agent-tag">System</div>
+                            <div class="message-content">
+                                <p id="welcome-text">
+                                    {% if user_data.name == 'Guest' %}
+                                        Welcome! I'm your mental health support assistant. You can ask me questions about mental health, share your feelings, or discuss any concerns you may have. How can I help you today?
+                                    {% elif user_data.emotion and user_data.emotion != 'neutral/unsure' %}
+                                        Hi {{ user_data.name }}! I understand you're feeling {{ user_data.emotion }}. 
+                                        {% if user_data.result == 'Severe' %}
+                                            Given what you're experiencing, I want you to know that immediate support is available. How can I help you today?
+                                        {% elif user_data.result == 'Mild' %}
+                                            I'm here to provide support and guidance. What's on your mind?
+                                        {% else %}
+                                            I'm here to help you navigate through this. What would you like to talk about?
+                                        {% endif %}
+                                    {% else %}
+                                        Welcome {{ user_data.name }}! I'm your mental health support assistant. How are you feeling today?
+                                    {% endif %}
+                                </p>
+                            </div>
+                            <div class="audio-controls mt-2">
+                                <button class="btn btn-sm btn-outline-primary play-tts-btn" 
+                                        data-message-id="welcome-msg"
+                                        data-text="">
+                                    <i class="fas fa-play"></i> Play Voice Response
+                                </button>
+                                <span class="audio-status ms-2"></span>
+                            </div>
+                        </div>
+                    </div>
+                    
+                
+
+                    <div class="chat-footer">
+                    
+                        <form id="chat-form" class="d-flex align-items-end" onsubmit="return false;" action="javascript:void(0);">
+                            <!-- Voice recording button -->
+                            <button type="button" class="btn btn-warning rounded-circle me-2" id="voice-record-btn" style="width: 40px; height: 40px;">
+                                <i class="fas fa-microphone"></i>
+                            </button>
+                            
+                            <div class="flex-grow-1">
+                                <textarea id="message-input" class="form-control message-input" rows="1" placeholder="Type your message or use voice recording..."></textarea>
+                            </div>
+                            
+                            <button type="button" class="btn btn-primary rounded-circle ms-2" id="send-btn" style="width: 40px; height: 40px;">
+                                <i class="fas fa-paper-plane"></i>
+                            </button>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+<!-- Update the message display section -->
+<script>
+function displayMessage(message, isUser = false, agent = null, confidence = null) {
+    const chatMessages = document.getElementById('chat-messages');
+    const messageDiv = document.createElement('div');
+    messageDiv.className = `message ${isUser ? 'user-message' : 'bot-message'}`;
+    
+    if (isUser) {
+        messageDiv.innerHTML = `
+            <div class="message-content">
+                <strong>You:</strong> ${message}
+            </div>
+        `;
+    } else {
+        // Check if this is an enhanced response with exercises and questions
+        const hasExercises = message.includes('Mental Health Exercises') || message.includes('**Mental Health Exercises:**');
+        const hasQuestions = message.includes('Follow-up Questions') || message.includes('Questions to Consider');
+        
+        // Format the enhanced response
+        let formattedMessage = formatEnhancedResponse(message);
+        
+        messageDiv.innerHTML = `
+            <div class="message-content bot-response">
+                ${formattedMessage}
+                ${agent ? `<div class="agent-info">Response by: ${agent}</div>` : ''}
+                ${confidence ? `<div class="confidence-score">Confidence: ${(confidence * 100).toFixed(1)}%</div>` : ''}
+                ${hasExercises ? '<div class="feature-tag">✨ Includes Mental Health Exercises</div>' : ''}
+                ${hasQuestions ? '<div class="feature-tag">❓ Includes Follow-up Questions</div>' : ''}
+            </div>
+        `;
+    }
+    
+    chatMessages.appendChild(messageDiv);
+    chatMessages.scrollTop = chatMessages.scrollHeight;
+}
+
+function formatEnhancedResponse(message) {
+    // Enhanced formatting for better readability
+    let formatted = message
+        // Format section headers
+        .replace(/\*\*(EMPATHY\/ACKNOWLEDGMENT|SOLUTION\/INFORMATION|RECOMMENDATIONS):\*\*/g, 
+                '<h3 class="section-header">$1</h3>')
+        
+        // Format subsection headers
+        .replace(/\*\*(Mental Health Exercises|Follow-up Questions[^:]*|Next Steps):\*\*/g, 
+                '<h4 class="subsection-header">$1</h4>')
+        
+        // Format exercise items
+        .replace(/• \*\*([^:]+):\*\* ([^\n]+)/g, 
+                '<div class="exercise-item"><strong>$1:</strong> <span class="exercise-description">$2</span></div>')
+        
+        // Format regular bullet points
+        .replace(/• ([^\n]+)/g, '<li class="recommendation-item">$1</li>')
+        
+        // Format bold text
+        .replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
+        
+        // Format line breaks
+        .replace(/\n/g, '<br>');
+    
+    return formatted;
+}
+
+// Add CSS for enhanced formatting
+const enhancedStyles = `
+<style>
+.section-header {
+    color: #2c5530;
+    border-bottom: 2px solid #4a7c59;
+    padding-bottom: 5px;
+    margin: 15px 0 10px 0;
+    font-size: 1.1em;
+}
+
+.subsection-header {
+    color: #4a7c59;
+    margin: 10px 0 5px 0;
+    font-size: 1em;
+}
+
+.exercise-item {
+    background: #f0f8f0;
+    padding: 8px 12px;
+    margin: 5px 0;
+    border-left: 3px solid #4a7c59;
+    border-radius: 0 5px 5px 0;
+}
+
+.exercise-description {
+    color: #2c5530;
+    font-style: italic;
+}
+
+.recommendation-item {
+    margin: 5px 0;
+    padding: 3px 0;
+    list-style-type: disc;
+    margin-left: 20px;
+}
+
+.feature-tag {
+    display: inline-block;
+    background: #e8f5e8;
+    color: #2c5530;
+    padding: 2px 8px;
+    border-radius: 12px;
+    font-size: 0.8em;
+    margin: 2px;
+    border: 1px solid #4a7c59;
+}
+
+.agent-info {
+    font-size: 0.8em;
+    color: #666;
+    margin-top: 10px;
+    font-style: italic;
+}
+
+.confidence-score {
+    font-size: 0.8em;
+    color: #4a7c59;
+    margin-top: 5px;
+    font-weight: bold;
+}
+
+.bot-response {
+    line-height: 1.6;
+}
+
+.empathy-section, .solution-section, .recommendations-section {
+    margin: 15px 0;
+    padding: 12px;
+    border-radius: 8px;
+    border-left: 4px solid;
+}
+
+.empathy-section {
+    background-color: #e3f2fd;
+    border-left-color: #2196f3;
+}
+
+.solution-section {
+    background-color: #f3e5f5;
+    border-left-color: #9c27b0;
+}
+
+.recommendations-section {
+    background-color: #e8f5e8;
+    border-left-color: #4caf50;
+}
+
+.section-title {
+    font-weight: bold;
+    margin-bottom: 8px;
+    color: #333;
+}
+
+.structured-response {
+    line-height: 1.6;
+}
+</style>
+`;
+
+// Add the enhanced styles to the page
+document.head.insertAdjacentHTML('beforeend', enhancedStyles);
+</script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/4.0.2/marked.min.js"></script>
+
+<script>
+
+
+
+    // Global variables
+    let mediaRecorder;
+    let audioChunks = [];
+    let isRecording = false;
+    let currentAudio = null;
+    let isVoiceQuery = false;
+    let globalAudioController = null;
+
+    // ✅ FIXED: Safe template variable handling
+    function getUserData() {
+        try {
+            return {
+                name: '{{ session.get("user_data", {}).get("name", "Guest") | e }}' || 'Guest',
+                emotion: '{{ session.get("user_data", {}).get("emotion", "neutral") | e }}' || 'neutral',
+                result: '{{ session.get("user_data", {}).get("result", "Unknown") | e }}' || 'Unknown'
+            };
+        } catch (e) {
+            console.warn('Template variable error:', e);
+            return {
+                name: 'Guest',
+                emotion: 'neutral',
+                result: 'Unknown'
+            };
+        }
+    }
+
+    // ✅ SINGLE DOMContentLoaded listener with PROPER event binding
+    document.addEventListener('DOMContentLoaded', function() {
+        console.log('🚀 DOM loaded, initializing chat...');
+        
+        // Get elements with error checking
+        const chatBody = document.getElementById('chat-body');
+        const chatForm = document.getElementById('chat-form');
+        const messageInput = document.getElementById('message-input');
+        const sendBtn = document.getElementById('send-btn');
+        const voiceRecordBtn = document.getElementById('voice-record-btn');
+        const clearChatBtn = document.getElementById('clear-chat');
+        const clearHistoryBtn = document.getElementById('clear-history');
+        const endSessionBtn = document.getElementById('end-session');
+        // Delete account - Clean binding
+        const deleteAccountBtn = document.getElementById('delete-account');
+        if (deleteAccountBtn) {
+            deleteAccountBtn.addEventListener('click', deleteAccountHandler);
+        }
+
+        // Debug: Check if critical elements exist
+        if (!chatBody) {
+            console.error('❌ chat-body element not found!');
+            return;
+        }
+        if (!chatForm) {
+            console.error('❌ chat-form element not found!');
+            return;
+        }
+        if (!messageInput) {
+            console.error('❌ message-input element not found!');
+            return;
+        }
+        if (!sendBtn) {
+            console.error('❌ send-btn element not found!');
+            return;
+        }
+
+        console.log('✅ All critical elements found');
+
+        // Add global audio controls
+        addGlobalAudioControls();
+
+        // Check backend connection
+        checkBackendConnection();
+
+        // Load conversation history
+        loadConversationHistory();
+
+        // ✅ CRITICAL FIX: Use button click instead of form submit
+        sendBtn.addEventListener('click', function(e) {
+            e.preventDefault();
+            e.stopPropagation();
+            console.log('📤 Send button clicked');
+            handleMessageSend();
+        });
+
+        // ✅ REMOVE form submit listener entirely
+        // chatForm.addEventListener('submit', handleFormSubmission); // REMOVE THIS
+
+        // ✅ Enter key handling
+        messageInput.addEventListener('keydown', function(e) {
+            if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                e.stopPropagation();
+                console.log('⌨️ Enter key pressed');
+                handleMessageSend();
+            }
+        });
+
+        // Voice recording - Clean binding
+        if (voiceRecordBtn) {
+            voiceRecordBtn.addEventListener('click', toggleRecording);
+        }
+
+        // Clear chat - Clean binding
+        if (clearChatBtn) {
+            clearChatBtn.addEventListener('click', clearChatHandler);
+        }
+
+        // Clear history - Clean binding
+        if (clearHistoryBtn) {
+            clearHistoryBtn.addEventListener('click', clearHistoryHandler);
+        }
+
+        // End session - Clean binding
+        if (endSessionBtn) {
+            endSessionBtn.addEventListener('click', endSessionHandler);
+        }
+
+        // Auto-resize textarea
+        messageInput.addEventListener('input', function() {
+            this.style.height = 'auto';
+            this.style.height = this.scrollHeight + 'px';
+        });
+
+        // Initialize TTS for welcome message
+        initializeTTSButtons();
+
+        console.log('✅ Chat initialization complete');
+    });
+
+    // ✅ NEW: Single message send handler
+    async function handleMessageSend() {
+        console.log('📝 Handling message send');
+        
+        const messageInput = document.getElementById('message-input');
+        const sendBtn = document.getElementById('send-btn');
+        const message = messageInput.value.trim();
+        
+        if (!message) {
+            console.log('⏭️ Empty message, skipping');
+            return;
+        }
+
+        // Prevent multiple sends
+        if (sendBtn.disabled) {
+            console.log('⏭️ Send already in progress, ignoring');
+            return;
+        }
+
+        sendBtn.disabled = true;
+        sendBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
+
+        console.log('💬 Processing message:', message);
+
+        try {
+            // Add user message immediately
+            addUserMessage(message);
+            console.log('✅ User message added successfully');
+            
+            // Clear input
+            messageInput.value = '';
+            messageInput.style.height = 'auto';
+
+            // Show typing indicator
+            const typingIndicator = addTypingIndicator();
+
+            console.log('🚀 Sending request to /chat_message');
+            
+            const userData = getUserData();
+            console.log('👤 User data:', userData);
+            
+            const requestBody = {
+                message: message,
+                user_data: userData
+            };
+            console.log('📦 Request body:', JSON.stringify(requestBody, null, 2));
+
+            console.log('🌐 Making fetch request...');
+            
+            const response = await fetch('/chat_message', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                credentials: 'include',
+                body: JSON.stringify(requestBody)
+            });
+            
+            console.log('📡 Response received - Status:', response.status);
+            
+            if (!response.ok) {
+                const errorText = await response.text();
+                console.error('❌ Response not OK:', response.status, errorText);
+                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+            }
+
+            console.log('📖 Reading response JSON...');
+            const data = await response.json();
+            console.log('✅ Parsed response data:', JSON.stringify(data, null, 2));
+            
+            // Remove typing indicator
+            removeTypingIndicator(typingIndicator);
+
+            if (data && data.response) {
+                console.log('📝 Response text length:', data.response.length);
+                console.log('📝 Agent:', data.agent);
+                console.log('📝 Adding assistant message...');
+                
+                addAssistantMessage(data.response, data.agent || 'Assistant');
+                console.log('✅ Assistant message added successfully');
+                
+                // Auto-play for voice queries
+                if (isVoiceQuery) {
+                    setTimeout(() => {
+                        const lastMessage = document.querySelector('#chat-body .message:last-child');
+                        const playButton = lastMessage?.querySelector('.play-tts-btn');
+                        if (playButton) {
+                            playButton.click();
+                        }
+                    }, 800);
+                    isVoiceQuery = false;
+                }
+            } else {
+                console.error('❌ No response in data:', data);
+                addAssistantMessage('Sorry, I received an empty response. Please try again.', 'System');
+            }
+            
+        } catch (error) {
+            console.error('❌ Error details:', error);
+            removeTypingIndicator(typingIndicator);
+            addAssistantMessage('Sorry, there was a network error. Please check your connection and try again.', 'System');
+        } finally {
+            // Re-enable send button
+            sendBtn.disabled = false;
+            sendBtn.innerHTML = '<i class="fas fa-paper-plane"></i>';
+        }
+        
+        scrollToBottom();
+    }
+
+
+    // ✅ ADD: Backend connection check with user feedback
+    async function checkBackendConnection() {
+        try {
+            console.log('🔗 Checking FastAPI backend connection...');
+            
+            const response = await fetch('/test_backend_connection', {
+                method: 'GET',
+                timeout: 5000
+            });
+            
+            if (response.ok) {
+                console.log('✅ FastAPI backend is connected and ready');
+                return true;
+            } else {
+                console.log('⚠️ FastAPI backend responded with error:', response.status);
+                showBackendWarning();
+                return false;
+            }
+        } catch (error) {
+            console.log('❌ FastAPI backend is not available:', error.message);
+            showBackendWarning();
+            return false;
+        }
+    }
+
+        // ✅ ADD: Delete account event handler
+    function deleteAccountHandler() {
+        // Multi-step confirmation for safety
+        const userName = getUserData().name;
+        
+        // First confirmation
+        if (!confirm(`⚠️ WARNING: Are you sure you want to permanently delete your account?`)) {
+            return;
+        }
+        
+        // Second confirmation with username
+        const confirmText = prompt(
+            `🚨 FINAL WARNING: This action cannot be undone!\n\n` +
+            `Your account "${userName}" and ALL associated data will be permanently deleted, including:\n` +
+            `• Your profile information\n` +
+            `• All assessment results\n` +
+            `• Complete conversation history\n` +
+            `• All saved data\n\n` +
+            `Type "DELETE MY ACCOUNT" (exactly) to confirm:`
+        );
+        
+        if (confirmText !== "DELETE MY ACCOUNT") {
+            alert("Account deletion cancelled. The text must match exactly.");
+            return;
+        }
+        
+        // Show loading state
+        const deleteBtn = document.getElementById('delete-account');
+        if (deleteBtn) {
+            deleteBtn.disabled = true;
+            deleteBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i> Deleting...';
+        }
+        
+        // Make delete request
+        fetch('/delete_account', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            credentials: 'include'
+        })
+        .then(response => response.json())
+        .then(data => {
+            if (data.status === 'success') {
+                alert('Your account has been permanently deleted. You will now be redirected to the home page.');
+                window.location.href = '/';
+            } else {
+                alert('Error deleting account: ' + (data.message || 'Unknown error'));
+                // Reset button
+                if (deleteBtn) {
+                    deleteBtn.disabled = false;
+                    deleteBtn.innerHTML = '<i class="fas fa-user-times me-2"></i> Delete Account';
+                }
+            }
+        })
+        .catch(error => {
+            console.error('Error:', error);
+            alert('Network error occurred while deleting account. Please try again.');
+            // Reset button
+            if (deleteBtn) {
+                deleteBtn.disabled = false;
+                deleteBtn.innerHTML = '<i class="fas fa-user-times me-2"></i> Delete Account';
+            }
+        });
+    }
+
+ 
+
+    function showBackendWarning() {
+        const chatBody = document.getElementById('chat-body');
+        if (chatBody) {
+            const warningElement = document.createElement('div');
+            warningElement.className = 'message assistant-message bg-warning-subtle';
+            warningElement.innerHTML = `
+                <div class="agent-tag">System Notice</div>
+                <div class="message-content">
+                    <p>⚠️ <strong>Backend Notice:</strong> The AI assistant backend is not fully available. You'll receive basic responses while we work to restore full functionality.</p>
+                    <p><small>Please ensure FastAPI is running on port 8000, then refresh the page.</small></p>
+                </div>
+            `;
+            chatBody.appendChild(warningElement);
+            scrollToBottom();
+        }
+    }
+
+
+
+    // ✅ FIXED: Robust message display functions
+    function addUserMessage(message) {
+        const chatBody = document.getElementById('chat-body');
+        
+        if (!chatBody) {
+            console.error('❌ Chat body not found for user message!');
+            return;
+        }
+        
+        console.log('✅ Adding user message:', message);
+        
+        const userMessageElement = document.createElement('div');
+        userMessageElement.className = 'message user-message';
+        userMessageElement.innerHTML = `<p>${escapeHtml(message)}</p>`;
+        
+        chatBody.appendChild(userMessageElement);
+        scrollToBottom();
+        
+        console.log('✅ User message element added to DOM');
+    }
+
+    function addTypingIndicator() {
+        const chatBody = document.getElementById('chat-body');
+        
+        if (!chatBody) {
+            console.error('❌ Chat body not found for typing indicator!');
+            return null;
+        }
+        
+        const thinkingElement = document.createElement('div');
+        thinkingElement.className = 'message assistant-message typing-indicator';
+        thinkingElement.innerHTML = `
+            <div class="agent-tag">Assistant</div>
+            <div class="message-content">
+                <p>Thinking...</p>
+            </div>
+        `;
+        
+        chatBody.appendChild(thinkingElement);
+        scrollToBottom();
+        
+        console.log('✅ Typing indicator added');
+        return thinkingElement;
+    }
+
+    function removeTypingIndicator(typingIndicator) {
+        if (typingIndicator && typingIndicator.parentNode) {
+            typingIndicator.remove();
+            console.log('✅ Typing indicator removed');
+        }
+    }
+
+    function addAssistantMessage(message, agent = 'Assistant') {
+        const chatBody = document.getElementById('chat-body');
+        
+        if (!chatBody) {
+            console.error('❌ Chat body not found for assistant message!');
+            return;
+        }
+        
+        console.log('✅ Adding assistant message from:', agent);
+        
+        const messageId = 'msg-' + Date.now() + '-' + Math.random().toString(36).substr(2, 9);
+        
+        // ✅ FIXED: Simplified message formatting
+        let formattedMessage = formatMessage(message);
+        
+        const assistantMessageElement = document.createElement('div');
+        assistantMessageElement.className = 'message assistant-message';
+        
+        assistantMessageElement.innerHTML = `
+            <div class="agent-tag">${escapeHtml(agent)}</div>
+            <div class="message-content">${formattedMessage}</div>
+            <div class="audio-controls mt-2">
+                <button class="btn btn-sm btn-outline-primary play-tts-btn" 
+                        data-message-id="${messageId}" 
+                        data-text="${encodeURIComponent(message)}">
+                    <i class="fas fa-play"></i> Play Voice
+                </button>
+                <span class="audio-status ms-2"></span>
+            </div>
+        `;
+        
+        chatBody.appendChild(assistantMessageElement);
+        
+        // ✅ FIXED: Add event listener to the new play button
+        const playButton = assistantMessageElement.querySelector('.play-tts-btn');
+        const audioStatus = assistantMessageElement.querySelector('.audio-status');
+        
+        if (playButton && audioStatus) {
+            playButton.addEventListener('click', function() {
+                const text = decodeURIComponent(this.getAttribute('data-text'));
+                playMessageTTS(this, text, audioStatus);
+            });
+        }
+        
+        scrollToBottom();
+        console.log('✅ Assistant message fully added with event listeners!');
+    }
+
+    // ✅ FIXED: Simplified message formatting
+    function formatMessage(message) {
+        if (!message) return '';
+        
+        // Use marked.js if available, otherwise simple formatting
+        if (typeof marked !== 'undefined') {
+            try {
+                return marked.parse(message);
+            } catch (e) {
+                console.warn('Marked.js parsing failed, using simple formatting');
+            }
+        }
+        
+        // Simple fallback formatting
+        let formatted = escapeHtml(message);
+        
+        // Convert **bold** to <strong>
+        formatted = formatted.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
+        
+        // Convert *italic* to <em>
+        formatted = formatted.replace(/\*([^*]+)\*/g, '<em>$1</em>');
+        
+        // Convert line breaks
+        formatted = formatted.replace(/\n/g, '<br>');
+        
+        // Convert bullet points
+        formatted = formatted.replace(/• ([^\n]+)/g, '<li>$1</li>');
+        
+        return formatted;
+    }
+
+    function escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+
+    function scrollToBottom() {
+        const chatBody = document.getElementById('chat-body');
+        if (chatBody) {
+            chatBody.scrollTop = chatBody.scrollHeight;
+        }
+    }
+
+    // ✅ FIXED: Initialize TTS buttons
+    function initializeTTSButtons() {
+        document.querySelectorAll('.play-tts-btn').forEach(button => {
+            // Remove existing listeners to prevent duplicates
+            const newButton = button.cloneNode(true);
+            button.parentNode.replaceChild(newButton, button);
+            
+            const text = newButton.getAttribute('data-text');
+            const audioStatus = newButton.parentElement.querySelector('.audio-status');
+            
+            newButton.addEventListener('click', function() {
+                playMessageTTS(this, text, audioStatus);
+            });
+        });
+    }
+
+       // ✅ MISSING: Event handler functions
+    function clearChatHandler() {
+        if (confirm('Are you sure you want to clear the current chat?')) {
+            clearChatDisplay();
+        }
+    }
+
+    async function clearHistoryHandler() {
+        if (confirm('Are you sure you want to clear your conversation history permanently?')) {
+            await clearConversationHistory();
+        }
+    }
+
+    function endSessionHandler() {
+        if (confirm('Are you sure you want to end your session?')) {
+            endUserSession();
+        }
+    }
+
+    // ✅ MISSING: Clear chat display function
+    function clearChatDisplay() {
+        if (currentAudio) {
+            stopGlobalAudio();
+        }
+        
+        const chatBody = document.getElementById('chat-body');
+        if (!chatBody) return;
+        
+        // Clear all messages
+        chatBody.innerHTML = '';
+        
+        // Add welcome message back
+        const welcomeMessage = document.createElement('div');
+        welcomeMessage.className = 'message assistant-message';
+        welcomeMessage.innerHTML = `
+            <div class="agent-tag">System</div>
+            <div class="message-content">
+                <p>Chat cleared. How can I help you today?</p>
+            </div>
+            <div class="audio-controls mt-2">
+                <button class="btn btn-sm btn-outline-primary play-tts-btn" data-text="Chat cleared. How can I help you today?">
+                    <i class="fas fa-play"></i> Play Voice Response
+                </button>
+                <span class="audio-status ms-2"></span>
+            </div>
+        `;
+        chatBody.appendChild(welcomeMessage);
+        
+        // Initialize TTS for welcome message
+        initializeTTSButtons();
+        
+        console.log('✅ Chat display cleared');
+    }
+
+    // ✅ MISSING: Clear conversation history function
+    async function clearConversationHistory() {
+        try {
+            const response = await fetch('/delete_conversation_history', {
+                method: 'POST',
+                credentials: 'include'
+            });
+            
+            if (response.ok) {
+                clearChatDisplay();
+                alert('Conversation history cleared successfully!');
+            } else {
+                alert('Failed to clear conversation history');
+            }
+        } catch (error) {
+            console.error('Error clearing history:', error);
+            alert('Error clearing conversation history');
+        }
+    }
+
+    // ✅ MISSING: End session function
+    function endUserSession() {
+        if (currentAudio) {
+            stopGlobalAudio();
+        }
+        
+        fetch('/clear_session', {
+            method: 'POST',
+            credentials: 'include'
+        }).then(response => response.json())
+        .then(data => {
+            if (data.redirect) {
+                window.location.href = data.redirect;
+            }
+        }).catch(() => {
+            window.location.href = '/';
+        });
+    }
+
+    // ✅ MISSING: Load conversation history function
+    async function loadConversationHistory() {
+        try {
+            const response = await fetch('/load_conversation_history');
+            if (response.ok) {
+                const data = await response.json();
+                const messages = data.messages || [];
+                
+                if (messages.length > 0) {
+                    const chatBody = document.getElementById('chat-body');
+                    
+                    // Clear default welcome messages
+                    const defaultMessages = chatBody.querySelectorAll('.message.assistant-message');
+                    defaultMessages.forEach(msg => {
+                        const content = msg.querySelector('.message-content p');
+                        if (content && content.textContent.includes('Welcome')) {
+                            msg.remove();
+                        }
+                    });
+                    
+                    // Add history messages
+                    messages.forEach(msg => {
+                        if (msg.role === 'user') {
+                            addUserMessage(msg.content);
+                        } else if (msg.role === 'assistant') {
+                            addAssistantMessage(msg.content, 'Assistant');
+                        }
+                    });
+                    
+                    scrollToBottom();
+                }
+            }
+        } catch (error) {
+            console.log('No conversation history available or user is guest');
+        }
+    }
+
+    // ✅ COMPLETE: Toggle recording function (was missing)
+    function toggleRecording() {
+        if (!isRecording) {
+            startRecording();
+        } else {
+            stopRecording();
+        }
+    }
+
+    // ✅ COMPLETE: Start recording function
+    function startRecording() {
+        if (currentAudio) {
+            stopGlobalAudio();
+        }
+
+        navigator.mediaDevices.getUserMedia({ 
+            audio: {
+                echoCancellation: true,
+                noiseSuppression: true,
+                autoGainControl: true,
+                sampleRate: 16000,
+                channelCount: 1
+            } 
+        })
+        .then(stream => {
+            const options = { mimeType: 'audio/webm;codecs=opus' };
+            if (!MediaRecorder.isTypeSupported(options.mimeType)) {
+                options.mimeType = 'audio/webm';
+            }
+            
+            mediaRecorder = new MediaRecorder(stream, options);
+            audioChunks = [];
+            
+            mediaRecorder.addEventListener('dataavailable', event => {
+                if (event.data.size > 0) {
+                    audioChunks.push(event.data);
+                }
+            });
+            
+            mediaRecorder.addEventListener('stop', () => {
+                const audioBlob = new Blob(audioChunks, { type: mediaRecorder.mimeType });
+                
+                if (audioBlob.size < 1000) {
+                    alert('Recording too short. Please speak for at least 2-3 seconds.');
+                    resetVoiceButton();
+                    return;
+                }
+                
+                isVoiceQuery = true;
+                transcribeSpeech(audioBlob);
+                stream.getTracks().forEach(track => track.stop());
+            });
+            
+            mediaRecorder.start(100);
+            isRecording = true;
+            
+            const voiceRecordBtn = document.getElementById('voice-record-btn');
+            voiceRecordBtn.innerHTML = '<i class="fas fa-stop"></i>';
+            voiceRecordBtn.classList.remove('btn-warning');
+            voiceRecordBtn.classList.add('btn-danger');
+            
+            setTimeout(() => {
+                if (isRecording) {
+                    stopRecording();
+                }
+            }, 10000);
+        })
+        .catch(error => {
+            console.error('Microphone error:', error);
+            alert('Could not access microphone. Please check permissions.');
+        });
+    }
+
+    // ✅ COMPLETE: Stop recording function
+    function stopRecording() {
+        if (mediaRecorder && isRecording) {
+            mediaRecorder.stop();
+            isRecording = false;
+            
+            const voiceRecordBtn = document.getElementById('voice-record-btn');
+            voiceRecordBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
+            voiceRecordBtn.disabled = true;
+        }
+    }
+
+    // ✅ COMPLETE: Transcribe speech function
+    function transcribeSpeech(audioBlob) {
+        const formData = new FormData();
+        formData.append('audio', audioBlob, 'recording.webm');
+        
+        fetch('/transcribe', {
+            method: 'POST',
+            body: formData
+        })
+        .then(response => response.json())
+        .then(data => {
+            if (data.transcript && data.transcript.trim()) {
+                const messageInput = document.getElementById('message-input');
+                messageInput.value = data.transcript;
+                messageInput.focus();
+                
+                isVoiceQuery = true;
+                
+                setTimeout(() => {
+                    handleMessageSend(); // ✅ FIXED: Call handleMessageSend instead of form submit
+                }, 500);
+                
+                const voiceRecordBtn = document.getElementById('voice-record-btn');
+                voiceRecordBtn.innerHTML = '<i class="fas fa-check"></i>';
+                voiceRecordBtn.classList.remove('btn-danger');
+                voiceRecordBtn.classList.add('btn-success');
+                setTimeout(resetVoiceButton, 1500);
+            } else {
+                alert(data.error || 'No speech detected. Please speak clearly and try again.');
+                resetVoiceButton();
+            }
+        })
+        .catch(error => {
+            console.error('Transcription error:', error);
+            alert('Transcription failed. Please try again.');
+            resetVoiceButton();
+        });
+    }
+
+    // ✅ COMPLETE: Reset voice button function
+    function resetVoiceButton() {
+        const voiceRecordBtn = document.getElementById('voice-record-btn');
+        if (voiceRecordBtn) {
+            voiceRecordBtn.disabled = false;
+            voiceRecordBtn.innerHTML = '<i class="fas fa-microphone"></i>';
+            voiceRecordBtn.classList.remove('btn-danger', 'btn-success');
+            voiceRecordBtn.classList.add('btn-warning');
+        }
+    }
+
+    // ✅ MISSING: Show backend warning function
+    function showBackendWarning() {
+        const chatBody = document.getElementById('chat-body');
+        if (chatBody) {
+            const warningElement = document.createElement('div');
+            warningElement.className = 'message assistant-message bg-warning-subtle';
+            warningElement.innerHTML = `
+                <div class="agent-tag">System Notice</div>
+                <div class="message-content">
+                    <p>⚠️ <strong>Backend Notice:</strong> The AI assistant backend is not fully available. You'll receive basic responses while we work to restore full functionality.</p>
+                    <p><small>Please ensure FastAPI is running on port 8000, then refresh the page.</small></p>
+                </div>
+            `;
+            chatBody.appendChild(warningElement);
+            scrollToBottom();
+        }
+    }
+
+    // ✅ FIXED: Clear chat display
+    function clearChatDisplay() {
+        if (currentAudio) {
+            stopGlobalAudio();
+        }
+        
+        const chatBody = document.getElementById('chat-body');
+        if (!chatBody) return;
+        
+        // Clear all messages
+        chatBody.innerHTML = '';
+        
+        // Add welcome message back
+        const welcomeMessage = document.createElement('div');
+        welcomeMessage.className = 'message assistant-message';
+        welcomeMessage.innerHTML = `
+            <div class="agent-tag">System</div>
+            <div class="message-content">
+                <p>Chat cleared. How can I help you today?</p>
+            </div>
+            <div class="audio-controls mt-2">
+                <button class="btn btn-sm btn-outline-primary play-tts-btn" data-text="Chat cleared. How can I help you today?">
+                    <i class="fas fa-play"></i> Play Voice
+                </button>
+                <span class="audio-status ms-2"></span>
+            </div>
+        `;
+        chatBody.appendChild(welcomeMessage);
+        
+        // Initialize TTS for welcome message
+        initializeTTSButtons();
+        
+        console.log('✅ Chat display cleared');
+    }
+
+    async function clearConversationHistory() {
+        try {
+            const response = await fetch('/delete_conversation_history', {
+                method: 'POST',
+                credentials: 'include'
+            });
+            
+            if (response.ok) {
+                clearChatDisplay();
+                alert('Conversation history cleared successfully!');
+            } else {
+                alert('Failed to clear conversation history');
+            }
+        } catch (error) {
+            console.error('Error clearing history:', error);
+            alert('Error clearing conversation history');
+        }
+    }
+
+    function endUserSession() {
+        if (currentAudio) {
+            stopGlobalAudio();
+        }
+        
+        fetch('/clear_session', {
+            method: 'POST',
+            credentials: 'include'
+        }).then(response => response.json())
+        .then(data => {
+            if (data.redirect) {
+                window.location.href = data.redirect;
+            }
+        }).catch(() => {
+            window.location.href = '/';
+        });
+    }
+
+    // ===== AUDIO CONTROL FUNCTIONS =====
+    function addGlobalAudioControls() {
+        const globalControls = document.createElement('div');
+        globalControls.id = 'global-audio-controls';
+        globalControls.className = 'position-fixed top-0 end-0 m-3 p-2 bg-dark text-white rounded shadow';
+        globalControls.style.zIndex = '1000';
+        globalControls.style.display = 'none';
+        globalControls.innerHTML = `
+            <button id="global-pause-btn" class="btn btn-sm btn-light me-2">
+                <i class="fas fa-pause"></i>
+            </button>
+            <button id="global-stop-btn" class="btn btn-sm btn-danger">
+                <i class="fas fa-stop"></i>
+            </button>
+            <span id="global-audio-status" class="ms-2">Playing...</span>
+        `;
+        document.body.appendChild(globalControls);
+
+        document.getElementById('global-pause-btn').addEventListener('click', toggleGlobalAudio);
+        document.getElementById('global-stop-btn').addEventListener('click', stopGlobalAudio);
+    }
+
+    function showGlobalControls() {
+        const controls = document.getElementById('global-audio-controls');
+        if (controls) controls.style.display = 'block';
+    }
+
+    function hideGlobalControls() {
+        const controls = document.getElementById('global-audio-controls');
+        if (controls) controls.style.display = 'none';
+    }
+
+    function toggleGlobalAudio() {
+        if (currentAudio) {
+            const globalPauseBtn = document.getElementById('global-pause-btn');
+            const globalStatus = document.getElementById('global-audio-status');
+            
+            if (currentAudio.paused) {
+                currentAudio.play();
+                globalPauseBtn.innerHTML = '<i class="fas fa-pause"></i>';
+                globalStatus.textContent = 'Playing...';
+            } else {
+                currentAudio.pause();
+                globalPauseBtn.innerHTML = '<i class="fas fa-play"></i>';
+                globalStatus.textContent = 'Paused';
+            }
+        }
+    }
+
+    function stopGlobalAudio() {
+        if (currentAudio) {
+            currentAudio.pause();
+            currentAudio.currentTime = 0;
+            currentAudio = null;
+            hideGlobalControls();
+            resetAllPlayButtons();
+        }
+    }
+
+    async function playMessageTTS(button, text, statusElement) {
+        const messageId = button.getAttribute('data-message-id');
+        const cleanText = removeMarkdown(text);
+        
+        // If this message is currently playing, toggle pause/play
+        if (currentAudio && currentAudio.dataset && currentAudio.dataset.messageId === messageId) {
+            if (!currentAudio.paused) {
+                currentAudio.pause();
+                button.innerHTML = '<i class="fas fa-play"></i> Resume';
+                statusElement.textContent = 'Paused';
+                return;
+            } else {
+                currentAudio.play();
+                button.innerHTML = '<i class="fas fa-pause"></i> Pause';
+                statusElement.textContent = 'Playing...';
+                return;
+            }
+        }
+        
+        // Stop any currently playing audio
+        if (currentAudio) {
+            stopGlobalAudio();
+        }
+        
+        // Show loading state
+        button.disabled = true;
+        button.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Generating...';
+        statusElement.textContent = 'Generating speech...';
+        
+        try {
+            const response = await fetch('/generate-speech', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({ text: cleanText })
+            });
+
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+
+            const audioBlob = await response.blob();
+            const audioUrl = URL.createObjectURL(audioBlob);
+            
+            currentAudio = new Audio(audioUrl);
+            currentAudio.dataset = { messageId: messageId };
+            
+            currentAudio.oncanplay = () => {
+                button.disabled = false;
+                button.innerHTML = '<i class="fas fa-pause"></i> Pause';
+                button.classList.remove('btn-outline-primary');
+                button.classList.add('btn-primary');
+                statusElement.textContent = 'Ready to play';
+            };
+            
+            currentAudio.onplay = () => {
+                button.innerHTML = '<i class="fas fa-pause"></i> Pause';
+                statusElement.textContent = 'Playing...';
+                showGlobalControls();
+            };
+            
+            currentAudio.onpause = () => {
+                button.innerHTML = '<i class="fas fa-play"></i> Resume';
+                statusElement.textContent = 'Paused';
+            };
+            
+            currentAudio.onended = () => {
+                button.innerHTML = '<i class="fas fa-play"></i> Play Again';
+                button.classList.remove('btn-primary');
+                button.classList.add('btn-outline-primary');
+                statusElement.textContent = 'Finished';
+                hideGlobalControls();
+                URL.revokeObjectURL(audioUrl);
+                currentAudio = null;
+            };
+            
+            currentAudio.onerror = (e) => {
+                console.error('Audio playback error:', e);
+                button.innerHTML = '<i class="fas fa-exclamation-triangle"></i> Error';
+                button.disabled = false;
+                statusElement.textContent = 'Playback error';
+                hideGlobalControls();
+            };
+            
+            // Start playing
+            currentAudio.play();
+            
+        } catch (error) {
+            console.error("TTS Error:", error);
+            button.innerHTML = '<i class="fas fa-exclamation-triangle"></i> Failed';
+            button.disabled = false;
+            statusElement.textContent = 'Generation failed';
+            hideGlobalControls();
+        }
+    }
+
+
+     // ✅ NEW: Function to sync TTS text with actual displayed text
+    function syncWelcomeMessageTTS() {
+        const welcomeTextElement = document.getElementById('welcome-text');
+        const welcomePlayButton = document.querySelector('[data-message-id="welcome-msg"]');
+        
+        if (welcomeTextElement && welcomePlayButton) {
+            const actualText = welcomeTextElement.textContent.trim();
+            welcomePlayButton.setAttribute('data-text', encodeURIComponent(actualText));
+            
+            // Add click handler
+            welcomePlayButton.addEventListener('click', function() {
+                const text = decodeURIComponent(this.getAttribute('data-text'));
+                const audioStatus = this.parentElement.querySelector('.audio-status');
+                playMessageTTS(this, text, audioStatus);
+            });
+            
+            console.log('✅ Welcome message TTS synchronized with display text');
+        }
+    }
+
+    // ✅ UPDATE: Call sync function after DOM loads
+    document.addEventListener('DOMContentLoaded', function() {
+        console.log('🚀 DOM loaded, initializing chat...');
+        
+        // ... your existing DOMContentLoaded code ...
+        
+        // Initialize TTS for welcome message
+        initializeTTSButtons();
+        
+        // ✅ ADD: Sync welcome message TTS
+        syncWelcomeMessageTTS();
+        
+        console.log('✅ Chat initialization complete');
+    });
+
+    // ✅ UPDATE: Enhanced initializeTTSButtons function
+    function initializeTTSButtons() {
+        document.querySelectorAll('.play-tts-btn').forEach(button => {
+            // Skip welcome message - handled separately
+            if (button.getAttribute('data-message-id') === 'welcome-msg') {
+                return;
+            }
+            
+            // Remove existing listeners to prevent duplicates
+            const newButton = button.cloneNode(true);
+            button.parentNode.replaceChild(newButton, button);
+            
+            const text = newButton.getAttribute('data-text');
+            const audioStatus = newButton.parentElement.querySelector('.audio-status');
+            
+            newButton.addEventListener('click', function() {
+                const decodedText = decodeURIComponent(text);
+                playMessageTTS(this, decodedText, audioStatus);
+            });
+        });
+    }
+
+    function resetAllPlayButtons() {
+        document.querySelectorAll('.play-tts-btn').forEach(btn => {
+            btn.innerHTML = '<i class="fas fa-play"></i> Play Voice';
+            btn.classList.remove('btn-primary');
+            btn.classList.add('btn-outline-primary');
+            btn.disabled = false;
+        });
+        document.querySelectorAll('.audio-status').forEach(status => {
+            status.textContent = '';
+        });
+    }
+
+    function removeMarkdown(text) {
+        if (!text) return '';
+        
+        let cleanText = text;
+        cleanText = cleanText.replace(/```[\s\S]*?```/g, ' [Code example] ');
+        cleanText = cleanText.replace(/`([^`]+)`/g, '$1');
+        cleanText = cleanText.replace(/#{1,6}\s+/g, '');
+        cleanText = cleanText.replace(/(\*\*|__)(.*?)\1/g, '$2');
+        cleanText = cleanText.replace(/(\*|_)(.*?)\1/g, '$2');
+        cleanText = cleanText.replace(/^\s*[\*\-+]\s+/gm, '. ');
+        cleanText = cleanText.replace(/^\s*\d+\.\s+/gm, '. ');
+        cleanText = cleanText.replace(/\[([^\]]+)\]\([^)]+\)/g, '$1');
+        cleanText = cleanText.replace(/!\[([^\]]*)\]\([^)]+\)/g, ' [Image] ');
+        cleanText = cleanText.replace(/^\>\s+/gm, '');
+        cleanText = cleanText.replace(/\n{2,}/g, '. ');
+        cleanText = cleanText.replace(/\n/g, ' ');
+        cleanText = cleanText.replace(/\s+/g, ' ');
+        cleanText = cleanText.trim();
+        
+        if (cleanText && !cleanText.endsWith('.') && !cleanText.endsWith('!') && !cleanText.endsWith('?')) {
+            cleanText += '.';
+        }
+        
+        return cleanText;
+    }
+
+    // ===== VOICE RECORDING FUNCTIONS =====
+    function toggleRecording() {
+        if (!isRecording) {
+            startRecording();
+        } else {
+            stopRecording();
+        }
+    }
+
+    function startRecording() {
+        if (currentAudio) {
+            stopGlobalAudio();
+        }
+
+        navigator.mediaDevices.getUserMedia({ 
+            audio: {
+                echoCancellation: true,
+                noiseSuppression: true,
+                autoGainControl: true,
+                sampleRate: 16000,
+                channelCount: 1
+            } 
+        })
+        .then(stream => {
+            const options = { mimeType: 'audio/webm;codecs=opus' };
+            if (!MediaRecorder.isTypeSupported(options.mimeType)) {
+                options.mimeType = 'audio/webm';
+            }
+            
+            mediaRecorder = new MediaRecorder(stream, options);
+            audioChunks = [];
+            
+            mediaRecorder.addEventListener('dataavailable', event => {
+                if (event.data.size > 0) {
+                    audioChunks.push(event.data);
+                }
+            });
+            
+            mediaRecorder.addEventListener('stop', () => {
+                const audioBlob = new Blob(audioChunks, { type: mediaRecorder.mimeType });
+                
+                if (audioBlob.size < 1000) {
+                    alert('Recording too short. Please speak for at least 2-3 seconds.');
+                    resetVoiceButton();
+                    return;
+                }
+                
+                isVoiceQuery = true;
+                transcribeSpeech(audioBlob);
+                stream.getTracks().forEach(track => track.stop());
+            });
+            
+            mediaRecorder.start(100);
+            isRecording = true;
+            
+            const voiceRecordBtn = document.getElementById('voice-record-btn');
+            voiceRecordBtn.innerHTML = '<i class="fas fa-stop"></i>';
+            voiceRecordBtn.classList.remove('btn-warning');
+            voiceRecordBtn.classList.add('btn-danger');
+            
+            setTimeout(() => {
+                if (isRecording) {
+                    stopRecording();
+                }
+            }, 10000);
+        })
+        .catch(error => {
+            console.error('Microphone error:', error);
+            alert('Could not access microphone. Please check permissions.');
+        });
+    }
+
+    function stopRecording() {
+        if (mediaRecorder && isRecording) {
+            mediaRecorder.stop();
+            isRecording = false;
+            
+            const voiceRecordBtn = document.getElementById('voice-record-btn');
+            voiceRecordBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
+            voiceRecordBtn.disabled = true;
+        }
+    }
+
+    function transcribeSpeech(audioBlob) {
+        const formData = new FormData();
+        formData.append('audio', audioBlob, 'recording.webm');
+        
+        fetch('/transcribe', {
+            method: 'POST',
+            body: formData
+        })
+        .then(response => response.json())
+        .then(data => {
+            if (data.transcript && data.transcript.trim()) {
+                const messageInput = document.getElementById('message-input');
+                messageInput.value = data.transcript;
+                messageInput.focus();
+                
+                isVoiceQuery = true;
+                
+                setTimeout(() => {
+                    const chatForm = document.getElementById('chat-form');
+                    chatForm.dispatchEvent(new Event('submit'));
+                }, 500);
+                
+                const voiceRecordBtn = document.getElementById('voice-record-btn');
+                voiceRecordBtn.innerHTML = '<i class="fas fa-check"></i>';
+                voiceRecordBtn.classList.remove('btn-danger');
+                voiceRecordBtn.classList.add('btn-success');
+                setTimeout(resetVoiceButton, 1500);
+            } else {
+                alert(data.error || 'No speech detected. Please speak clearly and try again.');
+                resetVoiceButton();
+            }
+        })
+        .catch(error => {
+            console.error('Transcription error:', error);
+            alert('Transcription failed. Please try again.');
+            resetVoiceButton();
+        });
+    }
+
+    function resetVoiceButton() {
+        const voiceRecordBtn = document.getElementById('voice-record-btn');
+        if (voiceRecordBtn) {
+            voiceRecordBtn.disabled = false;
+            voiceRecordBtn.innerHTML = '<i class="fas fa-microphone"></i>';
+            voiceRecordBtn.classList.remove('btn-danger', 'btn-success');
+            voiceRecordBtn.classList.add('btn-warning');
+        }
+    }
+
+    // ===== CONVERSATION HISTORY =====
+    async function loadConversationHistory() {
+        try {
+            const response = await fetch('/load_conversation_history');
+            if (response.ok) {
+                const data = await response.json();
+                const messages = data.messages || [];
+                
+                if (messages.length > 0) {
+                    const chatBody = document.getElementById('chat-body');
+                    
+                    // Clear default welcome messages
+                    const defaultMessages = chatBody.querySelectorAll('.message.assistant-message');
+                    defaultMessages.forEach(msg => {
+                        const content = msg.querySelector('.message-content p');
+                        if (content && content.textContent.includes('Welcome')) {
+                            msg.remove();
+                        }
+                    });
+                    
+                    // Add history messages
+                    messages.forEach(msg => {
+                        if (msg.role === 'user') {
+                            addUserMessage(msg.content);
+                        } else if (msg.role === 'assistant') {
+                            addAssistantMessage(msg.content, 'Assistant');
+                        }
+                    });
+                    
+                    scrollToBottom();
+                }
+            }
+        } catch (error) {
+            console.log('No conversation history available or user is guest');
+        }
+    }
+
+async function checkBackendConnection() {
+    try {
+        console.log('🔗 Checking FastAPI backend connection...');
+        
+        const response = await fetch('/test_backend_connection', {
+            method: 'GET',
+            timeout: 5000
+        });
+        
+        if (response.ok) {
+            console.log('✅ FastAPI backend is connected and ready');
+            return true;
+        } else {
+            console.log('⚠️ FastAPI backend responded with error:', response.status);
+            return false;
+        }
+    } catch (error) {
+        console.log('❌ FastAPI backend is not available:', error.message);
+        return false;
+    }
+}
+
+
+</script>
+</body>
+</html>
+
+
+
+

templates/aboutt.html

@@ -0,0 +1,76 @@
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="">
+    <meta name="keywords" content="blogs, blog, universe ,world, personal blog, people, writer">
+    <meta name="robots" content="INDEX, FOLLOW">
+    <link rel="stylesheet" href="../static/styleabout.css">
+    <link rel="stylesheet" href="../static/mediaabout.css">
+
+
+
+    <title>ABOUT</title>
+
+</head>
+
+<body class="{% if session.user_id or session.is_guest %}authenticated{% endif %}"
+      data-signup-error="{{ signup_error|default('') }}"
+      data-login-error="{{ login_error|default('') }}"
+      data-show-signup="{{ show_signup_modal|default(false)|tojson }}"
+      data-show-login="{{ show_login_modal|default(false)|tojson }}">
+
+    <nav class="navbar">
+        <ul class="nav-Links">
+            <a href="{{ url_for('home') }}">
+                <div class="logo">
+                    <img src="{{ url_for('static', filename='mental-health_12560579.png') }}" alt="logo">
+                </div>
+            </a>
+            <div class="nav-item"><li><a href="{{ url_for('home') }}">Home</a></li></div>
+            <div class="nav-item"><li><a href="{{ url_for('chatbot') }}">ChatBot</a></li></div>
+            <div class="nav-item"><li><a href="{{ url_for('about') }}">About Us</a></li></div>
+            
+        </ul>
+    </nav>
+
+
+
+    <section class=" firstsection">
+
+        <div class="box">
+            <div class="first">
+           <h1>Mental Health Chatbot</h1> 
+           <p>  Mental health includes our emotional, psychological, and social well-being. 
+                It affects how we think, feel, and act. It also helps determine how we handle stress,
+                relate to others, and make choices. Mental health is important at every stage of life,
+                from childhood and adolescence through adulthood. 
+              <br>
+
+                Throughout your life, if you experience mental health problems, your thinking,
+                mood, and behavior could be affected. Many factors contribute to mental health problems,
+                and we aim to find those factors and give suggestions accordingly.
+           </p>
+           
+       
+            </div>
+        
+        </div>
+
+
+
+
+    </section>
+
+
+
+    <script src="java/resp.js"></script>
+
+
+</body>
+
+</html>

templates/assessment.html

@@ -0,0 +1,1306 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="">
+    <meta name="keywords" content="mental health, chatbot, wellness, self-assessment, coping strategies, shyness, loneliness, self esteem, life satisfaction">
+    <meta name="robots" content="INDEX, FOLLOW">
+    <link rel="stylesheet" href="{{ url_for('static', filename='styleassessment.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='mediahome.css') }}">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
+    <title>Mental Health Chatbot</title>
+    <style>
+        /* Authentication modal styles */
+        .auth-overlay {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.7);
+            z-index: 1000;
+            justify-content: center;
+            align-items: center;
+        }
+        
+        .auth-modal {
+            background: white;
+            padding: 40px;
+            border-radius: 15px;
+            max-width: 400px;
+            width: 90%;
+            position: relative;
+            max-height: 90vh;
+            overflow-y: auto;
+        }
+        
+        .close-modal {
+            position: absolute;
+            top: 15px;
+            right: 15px;
+            font-size: 30px;
+            cursor: pointer;
+            color: #999;
+        }
+        
+        .close-modal:hover {
+            color: #333;
+        }
+        
+        .auth-tabs {
+            display: flex;
+            margin-bottom: 30px;
+            border-bottom: 2px solid #eee;
+        }
+        
+        .auth-tab {
+            flex: 1;
+            padding: 10px;
+            text-align: center;
+            cursor: pointer;
+            border-bottom: 3px solid transparent;
+            transition: all 0.3s;
+        }
+        
+        .auth-tab.active {
+            color: #667eea;
+            border-bottom-color: #667eea;
+        }
+        
+        .auth-form {
+            display: none;
+        }
+        
+        .auth-form.active {
+            display: block;
+        }
+        
+        .form-group {
+            margin-bottom: 20px;
+        }
+        
+        .form-group label {
+            display: block;
+            margin-bottom: 5px;
+            color: #333;
+            font-weight: 500;
+        }
+        
+        .form-control {
+            width: 100%;
+            padding: 12px;
+            border: 1px solid #ddd;
+            border-radius: 8px;
+            font-size: 16px;
+            box-sizing: border-box;
+        }
+        
+        .form-control:focus {
+            outline: none;
+            border-color: #667eea;
+        }
+        
+        .btn-auth {
+            width: 100%;
+            padding: 12px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            border: none;
+            border-radius: 8px;
+            font-size: 16px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: transform 0.2s;
+        }
+        
+        .btn-auth:hover {
+            transform: translateY(-2px);
+        }
+        
+        .guest-access {
+            text-align: center;
+            margin-top: 20px;
+            padding-top: 20px;
+            border-top: 1px solid #eee;
+        }
+        
+        .guest-link {
+            color: #667eea;
+            text-decoration: none;
+        }
+        
+        .guest-link:hover {
+            text-decoration: underline;
+        }
+        
+        /* Hide survey form initially */
+        #survey-section {
+            display: none;
+        }
+        
+        /* Show survey when authenticated */
+        body.authenticated #survey-section {
+            display: block;
+        }
+        
+        body.authenticated .auth-prompt {
+            display: none;
+        }
+        
+        .error-message {
+            background: #fee;
+            color: #c33;
+            padding: 10px;
+            border-radius: 5px;
+            margin-bottom: 20px;
+            text-align: center;
+        }
+        
+        .btn-primary,.btn-success{
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            padding: 10px 20px;
+            border: none;
+            border-radius: 5px;
+            text-decoration: none;
+            display: inline-block;
+            cursor: pointer;
+            transition: all 0.3s;
+            font-size: 16px;
+            font-weight: 600;
+        }
+
+        .btn-primary.btn-success:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+        }
+        
+        .btn-secondary {
+                  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            padding: 10px 20px;
+            border: none;
+            border-radius: 5px;
+            text-decoration: none;
+            display: inline-block;
+            cursor: pointer;
+            transition: all 0.3s;
+            font-size: 16px;
+            font-weight: 600;
+        }
+        
+        
+        .btn-secondary:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+        }
+
+        .step-navigation {
+            display: flex;
+            justify-content: space-between;
+            /* margin-top: 20px; */
+        }
+        
+        /* Authentication specific styles */
+        .auth-prompt {
+            min-height: 60vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        /* Password strength indicator */
+        .password-strength {
+            font-size: 12px;
+            margin-top: 5px;
+            padding: 3px 8px;
+            border-radius: 3px;
+            display: inline-block;
+        }
+        
+        .password-strength.weak {
+            color: #dc3545;
+            background-color: #f8d7da;
+        }
+        
+        .password-strength.medium {
+            color: #856404;
+            background-color: #fff3cd;
+        }
+        
+        .password-strength.strong {
+            color: #155724;
+            background-color: #d4edda;
+        }
+        
+        /* Add confirm password field styling */
+        .password-match-error {
+            color: #dc3545;
+            font-size: 12px;
+            margin-top: 5px;
+        }
+
+
+        .error-message {
+            background: #f8d7da;
+            color: #721c24;
+            padding: 12px 20px;
+            border-radius: 5px;
+            margin-bottom: 20px;
+            text-align: center;
+            border: 1px solid #f5c6cb;
+            font-weight: 500;
+            animation: shake 0.5s ease-in-out;
+        }
+
+        @keyframes shake {
+            0%, 100% { transform: translateX(0); }
+            25% { transform: translateX(-10px); }
+            75% { transform: translateX(10px); }
+        }
+
+        .success-message {
+            background: #d4edda;
+            color: #155724;
+            padding: 12px 20px;
+            border-radius: 5px;
+            margin-bottom: 20px;
+            text-align: center;
+            border: 1px solid #c3e6cb;
+            font-weight: 500;
+        }
+
+        /* Progress bar styles */
+        .progress-indicator {
+            /* margin: 20px 0; */
+            text-align: center;
+        }
+        
+        .progress-bar {
+            background: #e9ecef;
+            border-radius: 10px;
+            height: 8px;
+            margin: 10px 0;
+            overflow: hidden;
+        }
+        
+        .progress-fill {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            height: 100%;
+            width: 16.66%; /* Default to step 1 */
+            transition: width 0.3s ease;
+        }
+        
+        .step-counter {
+            color: #666;
+            font-size: 14px;
+            font-weight: 500;
+        }
+    </style>
+</head>
+
+<body class="authenticated">
+
+<nav class="navbar">
+    <ul class="nav-Links">
+        <a href="{{ url_for('home') }}">
+            <div class="logo">
+                <img src="{{ url_for('static', filename='mental-health_12560579.png') }}" alt="logo">
+            </div>
+        </a>
+        <div class="nav-item"><li><a href="{{ url_for('home') }}">Home</a></li></div>
+        <div class="nav-item"><li><a href="{{ url_for('chatbot') }}">Chatbot</a></li></div>
+        <div class="nav-item"><li><a href="{{ url_for('about') }}">About Us</a></li></div>
+        <div class="nav-item"><li><a href="#">Welcome, {{ session.username }}</a></li></div>
+        <div class="nav-item"><li><a href="{{ url_for('logout') }}">Logout</a></li></div>
+    </ul>
+</nav>
+
+
+
+<!-- 
+{% if session.user_id and session.user_data.name %}
+<div class="bascic-info">
+    <label>Name:
+        <input type="text" name="Name" class="form-control" value="{{ session.user_data.name }}" readonly required>
+    </label>
+</div>
+{% else %}
+<div class="bascic-info">
+    <label>Name:
+        <input type="text" name="Name" class="form-control" required placeholder="Enter your full name">
+    </label>
+</div>
+{% endif %} -->
+
+   
+
+    <section class="firstsection" id="survey-section" style="display: block;">
+        <div class="box">
+            <div class="container">
+                <header>
+                      <h1 id="title">Mental Health Assessment - Bhutan</h1>
+                    {% if session.user_id %}
+                    <p>Welcome, {{ session.user_data.name }}! Please complete this comprehensive mental health assessment.</p>
+                    {% endif %}
+                    <div class="assessment-info">
+                        <h3>Professional Mental Health Screening</h3>
+                        <p>This assessment includes clinically validated questionnaires: PHQ-9 (Depression), GAD-7 (Anxiety), and basic wellness screening.</p>
+                        <p><strong>Important:</strong> This is a screening tool, not a diagnostic instrument. Results should be discussed with a healthcare professional.</p>
+                    </div>
+                </header>
+                <div class="form-container">
+                    <div class="left-section">
+                        <div class="image">
+                             <img src="/static/treeman.png" alt="Mental Health Assessment">
+                        </div>
+                        
+                    </div>
+                    <div class="right-section">
+                        <form id="survey-form" method="post" action="/assessment/step">
+                            <input type="hidden" name="current_step" id="current-step" value="1">
+                            <input type="hidden" name="total_steps" id="total-steps" value="6">
+                            <div class="form-box">
+                                <h2 id="sub-title">Mental Health Assessment</h2>
+                                
+                                <!-- Step 1: Basic Information -->
+                                <div class="assessment-step" id="step-1" data-step="1">
+                                    <div class="section-title">Step 1: Basic Information</div>     
+                                    <div class="row">
+                                        {% if session.user_id and session.user_data.name %}
+                                        <div class="bascic-info">
+                                            <label>Name:
+                                                <input type="text" name="Name" class="form-control" value="{{ session.user_data.name }}" readonly required>
+                                            </label>
+                                        </div>
+                                        {% else %}
+                                        <div class="bascic-info">
+                                            <label>Name:
+                                                <input type="text" name="Name" class="form-control" required placeholder="Enter your full name">
+                                            </label>
+                                        </div>
+                                        {% endif %}
+                                        <div class="bascic-info">
+                                            <label>Age:
+                                                <input class="form-control" type="number" name="Age" min="10" max="100" required>
+                                            </label>
+                                        </div>
+                                        <div class="bascic-info">
+                                            <label>Gender:
+                                                <select class="form-control" name="Sex" required>
+                                                    <option disabled selected value>Select One</option>
+                                                    <option value="Male">Male</option>
+                                                    <option value="Female">Female</option>
+                                                    <option value="Other">Other</option>
+                                                    <option value="Prefer not to say">Prefer not to say</option>
+                                                </select>
+                                            </label>
+                                        </div>
+                                        <div class="bascic-info">
+                                            <label>Location:
+                                                <select class="form-control" name="Location" required>
+                                                    <option disabled selected value>Select One</option>
+                                                    <option value="Thimphu">Thimphu</option>
+                                                    <option value="Paro">Paro</option>
+                                                    <option value="Punakha">Punakha</option>
+                                                    <option value="Wangdue">Wangdue</option>
+                                                    <option value="Other Urban">Other Urban</option>
+                                                    <option value="Rural">Rural</option>
+                                                </select>
+                                            </label>
+                                        </div>
+                                        <div class="bascic-info">
+                                            <label>Days spent indoors in the last week:
+                                                <select class="form-control" name="days_indoors" required>
+                                                    <option disabled selected value>Select One</option>
+                                                    <option value="0">0 days</option>
+                                                    <option value="1">1 day</option>
+                                                    <option value="2">2 days</option>
+                                                    <option value="3">3 days</option>
+                                                    <option value="4">4 days</option>
+                                                    <option value="5">5 days</option>
+                                                    <option value="6">6 days</option>
+                                                    <option value="7">7 days (all week)</option>
+                                                </select>
+                                            </label>
+                                        </div>
+                                        
+                                        <div class="bascic-info">
+                                            <label>How would you describe your current emotion/mood?
+                                                <select class="form-control" name="Emotion" required>
+                                                    <option disabled selected value>Select One</option>
+                                                    <option value="Very Happy">Very Happy</option>
+                                                    <option value="Happy">Happy</option>
+                                                    <option value="Neutral">Neutral</option>
+                                                    <option value="Sad">Sad</option>
+                                                    <option value="Very Sad">Very Sad</option>
+                                                    <option value="Anxious">Anxious</option>
+                                                    <option value="Angry">Angry</option>
+                                                    <option value="Stressed">Stressed</option>
+                                                    <option value="Confused">Confused</option>
+                                                    <option value="Other">Other</option>
+                                                </select>
+                                            </label>
+                                        </div>
+                                        
+                                        <div class="bascic-info">
+                                            <label>Do you have a history of mental illness?
+                                                <select class="form-control" name="history_of_mental_illness" required>
+                                                    <option disabled selected value>Select One</option>
+                                                    <option value="Yes">Yes</option>
+                                                    <option value="No">No</option>
+                                                    <option value="Unsure">Unsure</option>
+                                                    <option value="Prefer not to say">Prefer not to say</option>
+                                                </select>
+                                            </label>
+                                        </div>
+
+                                        <div class="bascic-info">
+                                            <label>Are you currently receiving any mental health treatment?
+                                                <select class="form-control" name="treatment" required>
+                                                    <option disabled selected value>Select One</option>
+                                                    <option value="Yes - Therapy/Counseling">Yes - Therapy/Counseling</option>
+                                                    <option value="Yes - Medication">Yes - Medication</option>
+                                                    <option value="Yes - Both therapy and medication">Yes - Both therapy and medication</option>
+                                                    <option value="No">No</option>
+                                                    <option value="Previously, but not currently">Previously, but not currently</option>
+                                                    <option value="Prefer not to say">Prefer not to say</option>
+                                                </select>
+                                            </label>
+                                        </div>
+                                    </div>
+                                    <div class="step-navigation">
+                                        <button type="submit" name="action" value="next" class="btn btn-primary">Next Step</button>
+                                    </div>
+                                </div>
+
+                                <!-- Step 2: PHQ-9 Depression Screening -->
+                                <div class="assessment-step" id="step-2" data-step="2" style="display: none;">
+                                    <div class="section-title">Step 2: PHQ-9 Depression Screening</div>
+                                <div class="assessment-instructions">
+                                    <p><strong>Instructions:</strong> Over the last 2 weeks, how often have you been bothered by any of the following problems?</p>
+                                    <p><em>Scale: 0 = Not at all, 1 = Several days, 2 = More than half the days, 3 = Nearly every day</em></p>
+                                </div>
+                                <div class="row">
+                                    <div class="question-item">
+                                        <label>
+                                            <span class="question">1. Little interest or pleasure in doing things</span>
+                                            <select name="PHQ9_1" class="form-control" required>
+                                                <option disabled selected value>Select One</option>
+                                                <option value="0">Not at all</option>
+                                                <option value="1">Several days</option>
+                                                <option value="2">More than half the days</option>
+                                                <option value="3">Nearly every day</option>
+                                            </select>
+                                        </label>
+                                    </div>
+                                    <div class="question-item">
+                                        <label>
+                                            <span class="question">2. Feeling down, depressed, or hopeless</span>
+                                            <select name="PHQ9_2" class="form-control" required>
+                                                <option disabled selected value>Select One</option>
+                                                <option value="0">Not at all</option>
+                                                <option value="1">Several days</option>
+                                                <option value="2">More than half the days</option>
+                                                <option value="3">Nearly every day</option>
+                                            </select>
+                                        </label>
+                                    </div>
+                                    <div class="question-item">
+                                        <label>
+                                            <span class="question">3. Trouble falling asleep, staying asleep, or sleeping too much</span>
+                                            <select name="PHQ9_3" class="form-control" required>
+                                                <option disabled selected value>Select One</option>
+                                                <option value="0">Not at all</option>
+                                                <option value="1">Several days</option>
+                                                <option value="2">More than half the days</option>
+                                                <option value="3">Nearly every day</option>
+                                            </select>
+                                        </label>
+                                    </div>
+                                    <div class="question-item">
+                                        <label>
+                                            <span class="question">4. Feeling tired or having little energy</span>
+                                            <select name="PHQ9_4" class="form-control" required>
+                                                <option disabled selected value>Select One</option>
+                                                <option value="0">Not at all</option>
+                                                <option value="1">Several days</option>
+                                                <option value="2">More than half the days</option>
+                                                <option value="3">Nearly every day</option>
+                                            </select>
+                                        </label>
+                                    </div>
+                                    <div class="question-item">
+                                        <label>
+                                            <span class="question">5. Poor appetite or overeating</span>
+                                            <select name="PHQ9_5" class="form-control" required>
+                                                <option disabled selected value>Select One</option>
+                                                <option value="0">Not at all</option>
+                                                <option value="1">Several days</option>
+                                                <option value="2">More than half the days</option>
+                                                <option value="3">Nearly every day</option>
+                                            </select>
+                                        </label>
+                                    </div>
+                                    <div class="question-item">
+                                        <label>
+                                            <span class="question">6. Feeling bad about yourself or that you are a failure or have let yourself or your family down</span>
+                                            <select name="PHQ9_6" class="form-control" required>
+                                                <option disabled selected value>Select One</option>
+                                                <option value="0">Not at all</option>
+                                                <option value="1">Several days</option>
+                                                <option value="2">More than half the days</option>
+                                                <option value="3">Nearly every day</option>
+                                            </select>
+                                        </label>
+                                    </div>
+                                    <div class="question-item">
+                                        <label>
+                                            <span class="question">7. Trouble concentrating on things, such as reading the newspaper or watching television</span>
+                                            <select name="PHQ9_7" class="form-control" required>
+                                                <option disabled selected value>Select One</option>
+                                                <option value="0">Not at all</option>
+                                                <option value="1">Several days</option>
+                                                <option value="2">More than half the days</option>
+                                                <option value="3">Nearly every day</option>
+                                            </select>
+                                        </label>
+                                    </div>
+                                    <div class="question-item">
+                                        <label>
+                                            <span class="question">8. Moving or speaking so slowly that other people could have noticed, or being so fidgety or restless that you have been moving around a lot more than usual</span>
+                                            <select name="PHQ9_8" class="form-control" required>
+                                                <option disabled selected value>Select One</option>
+                                                <option value="0">Not at all</option>
+                                                <option value="1">Several days</option>
+                                                <option value="2">More than half the days</option>
+                                                <option value="3">Nearly every day</option>
+                                            </select>
+                                        </label>
+                                    </div>
+                                    <div class="question-item">
+                                        <label>
+                                            <span class="question">9. Thoughts that you would be better off dead or thoughts of hurting yourself in some way</span>
+                                            <select name="PHQ9_9" class="form-control" required>
+                                                <option disabled selected value>Select One</option>
+                                                <option value="0">Not at all</option>
+                                                <option value="1">Several days</option>
+                                                <option value="2">More than half the days</option>
+                                                <option value="3">Nearly every day</option>
+                                            </select>
+                                        </label>
+                                    </div>
+                                    </div>
+                                    <div class="step-navigation">
+                                        <button type="submit" name="action" value="previous" class="btn btn-secondary">Previous</button>
+                                        <button type="submit" name="action" value="next" class="btn btn-primary">Next Step</button>
+                                    </div>
+                                </div>
+
+                                <!-- Step 3: GAD-7 Anxiety Screening -->
+                                <div class="assessment-step" id="step-3" data-step="3" style="display: none;">
+                                    <div class="section-title">Step 3: GAD-7 Anxiety Screening</div>
+                                <div class="assessment-instructions">
+                                    <p><strong>Instructions:</strong> Over the last 2 weeks, how often have you been bothered by the following problems?</p>
+                                    <!-- <p><em>Scale: 0 = Not at all, 1 = Several days, 2 = More than half the days, 3 = Nearly every day</em></p> -->
+                                </div>
+                                <div class="row">
+                                    <div class="question-item">
+                                        <label>
+                                            <span class="question">1. Feeling nervous, anxious, or on edge</span>
+                                            <select name="GAD7_1" class="form-control" required>
+                                                <option disabled selected value>Select One</option>
+                                                <option value="0">Not at all</option>
+                                                <option value="1">Several days</option>
+                                                <option value="2">More than half the days</option>
+                                                <option value="3">Nearly every day</option>
+                                            </select>
+                                        </label>
+                                    </div>
+                                    <div class="question-item">
+                                        <label>
+                                            <span class="question">2. Not being able to stop or control worrying</span>
+                                            <select name="GAD7_2" class="form-control" required>
+                                                <option disabled selected value>Select One</option>
+                                                <option value="0">Not at all</option>
+                                                <option value="1">Several days</option>
+                                                <option value="2">More than half the days</option>
+                                                <option value="3">Nearly every day</option>
+                                            </select>
+                                        </label>
+                                    </div>
+                                    <div class="question-item">
+                                        <label>
+                                            <span class="question">3. Worrying too much about different things</span>
+                                            <select name="GAD7_3" class="form-control" required>
+                                                <option disabled selected value>Select One</option>
+                                                <option value="0">Not at all</option>
+                                                <option value="1">Several days</option>
+                                                <option value="2">More than half the days</option>
+                                                <option value="3">Nearly every day</option>
+                                            </select>
+                                        </label>
+                                    </div>
+                                    <div class="question-item">
+                                        <label>
+                                            <span class="question">4. Trouble relaxing</span>
+                                            <select name="GAD7_4" class="form-control" required>
+                                                <option disabled selected value>Select One</option>
+                                                <option value="0">Not at all</option>
+                                                <option value="1">Several days</option>
+                                                <option value="2">More than half the days</option>
+                                                <option value="3">Nearly every day</option>
+                                            </select>
+                                        </label>
+                                    </div>
+                                    <div class="question-item">
+                                        <label>
+                                            <span class="question">5. Being so restless that it's hard to sit still</span>
+                                            <select name="GAD7_5" class="form-control" required>
+                                                <option disabled selected value>Select One</option>
+                                                <option value="0">Not at all</option>
+                                                <option value="1">Several days</option>
+                                                <option value="2">More than half the days</option>
+                                                <option value="3">Nearly every day</option>
+                                            </select>
+                                        </label>
+                                    </div>
+                                    <div class="question-item">
+                                        <label>
+                                            <span class="question">6. Becoming easily annoyed or irritable</span>
+                                            <select name="GAD7_6" class="form-control" required>
+                                                <option disabled selected value>Select One</option>
+                                                <option value="0">Not at all</option>
+                                                <option value="1">Several days</option>
+                                                <option value="2">More than half the days</option>
+                                                <option value="3">Nearly every day</option>
+                                            </select>
+                                        </label>
+                                    </div>
+                                    <div class="question-item">
+                                        <label>
+                                            <span class="question">7. Feeling afraid as if something awful might happen</span>
+                                            <select name="GAD7_7" class="form-control" required>
+                                                <option disabled selected value>Select One</option>
+                                                <option value="0">Not at all</option>
+                                                <option value="1">Several days</option>
+                                                <option value="2">More than half the days</option>
+                                                <option value="3">Nearly every day</option>
+                                            </select>
+                                        </label>
+                                    </div>
+                                    </div>
+                                    <div class="step-navigation">
+                                        <button type="submit" name="action" value="previous" class="btn btn-secondary">Previous</button>
+                                        <button type="submit" name="action" value="next" class="btn btn-primary">Next Step</button>
+                                    </div>
+                                </div>
+
+                               
+
+                                <!-- Step 4: DAST-10 & AUDIT Screening -->
+                                <div class="assessment-step" id="step-4" data-step="4" style="display: none;">
+                                    <div class="section-title">Step 4: DAST-10 Substance Use Screening</div>
+                                    <div class="assessment-instructions">
+                                        <p><strong>Instructions:</strong> The following questions concern information about your involvement with drugs (excluding alcohol and tobacco) during the past 12 months.</p>
+                                        <p><em>Please answer honestly with Yes or No.</em></p>
+                                    </div>
+                                <div class="row">
+                                    <div class="question-item">
+                                        <label>
+                                            <span class="question">1. Have you used drugs other than those required for medical reasons?</span>
+                                            <select name="DAST_1" class="form-control" required>
+                                                <option disabled selected value>Select One</option>
+                                                <option value="No">No</option>
+                                                <option value="Yes">Yes</option>
+                                            </select>
+                                        </label>
+                                    </div>
+                                    <div class="question-item">
+                                        <label>
+                                            <span class="question">2. Have you abused more than one drug at a time?</span>
+                                            <select name="DAST_2" class="form-control" required>
+                                                <option disabled selected value>Select One</option>
+                                                <option value="No">No</option>
+                                                <option value="Yes">Yes</option>
+                                            </select>
+                                        </label>
+                                    </div>
+                                    <div class="question-item">
+                                        <label>
+                                            <span class="question">3. Are you able to stop using drugs when you want to?</span>
+                                            <select name="DAST_3" class="form-control" required>
+                                                <option disabled selected value>Select One</option>
+                                                <option value="Yes">Yes</option>
+                                                <option value="No">No</option>
+                                            </select>
+                                        </label>
+                                    </div>
+                                    <div class="question-item">
+                                        <label>
+                                            <span class="question">4. Have you had blackouts or flashbacks from drug use?</span>
+                                            <select name="DAST_4" class="form-control" required>
+                                                <option disabled selected value>Select One</option>
+                                                <option value="No">No</option>
+                                                <option value="Yes">Yes</option>
+                                            </select>
+                                        </label>
+                                    </div>
+                                    <div class="question-item">
+                                        <label>
+                                            <span class="question">5. Do you ever feel bad or guilty about your drug use?</span>
+                                            <select name="DAST_5" class="form-control" required>
+                                                <option disabled selected value>Select One</option>
+                                                <option value="No">No</option>
+                                                <option value="Yes">Yes</option>
+                                            </select>
+                                        </label>
+                                    </div>
+                                    <div class="question-item">
+                                        <label>
+                                            <span class="question">6. Does your spouse (or parents) ever complain about your involvement with drugs?</span>
+                                            <select name="DAST_6" class="form-control" required>
+                                                <option disabled selected value>Select One</option>
+                                                <option value="No">No</option>
+                                                <option value="Yes">Yes</option>
+                                            </select>
+                                        </label>
+                                    </div>
+                                    <div class="question-item">
+                                        <label>
+                                            <span class="question">7. Have you neglected your family because of your use of drugs?</span>
+                                            <select name="DAST_7" class="form-control" required>
+                                                <option disabled selected value>Select One</option>
+                                                <option value="No">No</option>
+                                                <option value="Yes">Yes</option>
+                                            </select>
+                                        </label>
+                                    </div>
+                                    <div class="question-item">
+                                        <label>
+                                            <span class="question">8. Have you engaged in illegal activities in order to obtain drugs?</span>
+                                            <select name="DAST_8" class="form-control" required>
+                                                <option disabled selected value>Select One</option>
+                                                <option value="No">No</option>
+                                                <option value="Yes">Yes</option>
+                                            </select>
+                                        </label>
+                                    </div>
+                                    <div class="question-item">
+                                        <label>
+                                            <span class="question">9. Have you ever experienced withdrawal symptoms (felt sick) when you stopped taking drugs?</span>
+                                            <select name="DAST_9" class="form-control" required>
+                                                <option disabled selected value>Select One</option>
+                                                <option value="No">No</option>
+                                                <option value="Yes">Yes</option>
+                                            </select>
+                                        </label>
+                                    </div>
+                                    <div class="question-item">
+                                        <label>
+                                            <span class="question">10. Have you had medical problems as a result of your drug use (e.g., memory loss, hepatitis, convulsions, bleeding)?</span>
+                                            <select name="DAST_10" class="form-control" required>
+                                                <option disabled selected value>Select One</option>
+                                                <option value="No">No</option>
+                                                <option value="Yes">Yes</option>
+                                            </select>
+                                        </label>
+                                    </div>
+                                </div>
+                                <div class="step-navigation">
+                                    <button type="button" name="action" value="previous" class="btn btn-secondary">Previous</button>
+                                    <button type="button" name="action" value="next" class="btn btn-primary">Next Step</button>
+                                </div>
+                            </div>
+                                
+
+                                       <!-- Step 5: AUDIT Alcohol Use Screening -->
+                                <div class="assessment-step" id="step-5" data-step="5" style="display: none;">
+                                    <div class="section-title">Step 5: AUDIT Alcohol Use Screening</div>
+                                <div class="assessment-instructions">
+                                    <p><strong>Instructions:</strong> Please answer the following questions based on your alcohol use over the past 12 months.</p>
+                                    <p><em>Select the most appropriate response for each question.</em></p>
+                                </div>
+                                <div class="row">
+                                    <div class="question-item">
+                                        <label>
+                                            <span class="question">1. How often do you have a drink containing alcohol?</span>
+                                            <select name="AUDIT_1" class="form-control" required>
+                                                <option disabled selected value>Select One</option>
+                                                <option value="Never">Never</option>
+                                                <option value="Monthly or less">Monthly or less</option>
+                                                <option value="2 to 4 times a month">2 to 4 times a month</option>
+                                                <option value="2 to 3 times a week">2 to 3 times a week</option>
+                                                <option value="4 or more times a week">4 or more times a week</option>
+                                            </select>
+                                        </label>
+                                    </div>
+                                    <div class="question-item">
+                                        <label>
+                                            <span class="question">2. How many drinks containing alcohol do you have on a typical day when you are drinking?</span>
+                                            <select name="AUDIT_2" class="form-control" required>
+                                                <option disabled selected value>Select One</option>
+                                                <option value="1 or 2">1 or 2</option>
+                                                <option value="3 or 4">3 or 4</option>
+                                                <option value="5 or 6">5 or 6</option>
+                                                <option value="7, 8, or 9">7, 8, or 9</option>
+                                                <option value="10 or more">10 or more</option>
+                                            </select>
+                                        </label>
+                                    </div>
+                                    <div class="question-item">
+                                        <label>
+                                            <span class="question">3. How often do you have six or more drinks on one occasion?</span>
+                                            <select name="AUDIT_3" class="form-control" required>
+                                                <option disabled selected value>Select One</option>
+                                                <option value="Never">Never</option>
+                                                <option value="Less than monthly">Less than monthly</option>
+                                                <option value="Monthly">Monthly</option>
+                                                <option value="Weekly">Weekly</option>
+                                                <option value="Daily or almost daily">Daily or almost daily</option>
+                                            </select>
+                                        </label>
+                                    </div>
+                                    <div class="question-item">
+                                        <label>
+                                            <span class="question">4. How often during the last year have you found that you were not able to stop drinking once you had started?</span>
+                                            <select name="AUDIT_4" class="form-control" required>
+                                                <option disabled selected value>Select One</option>
+                                                <option value="Never">Never</option>
+                                                <option value="Less than monthly">Less than monthly</option>
+                                                <option value="Monthly">Monthly</option>
+                                                <option value="Weekly">Weekly</option>
+                                                <option value="Daily or almost daily">Daily or almost daily</option>
+                                            </select>
+                                        </label>
+                                    </div>
+                                    <div class="question-item">
+                                        <label>
+                                            <span class="question">5. How often during the last year have you failed to do what was normally expected from you because of drinking?</span>
+                                            <select name="AUDIT_5" class="form-control" required>
+                                                <option disabled selected value>Select One</option>
+                                                <option value="Never">Never</option>
+                                                <option value="Less than monthly">Less than monthly</option>
+                                                <option value="Monthly">Monthly</option>
+                                                <option value="Weekly">Weekly</option>
+                                                <option value="Daily or almost daily">Daily or almost daily</option>
+                                            </select>
+                                        </label>
+                                    </div>
+                                    <div class="question-item">
+                                        <label>
+                                            <span class="question">6. How often during the last year have you needed a first drink in the morning to get yourself going after a heavy drinking session?</span>
+                                            <select name="AUDIT_6" class="form-control" required>
+                                                <option disabled selected value>Select One</option>
+                                                <option value="Never">Never</option>
+                                                <option value="Less than monthly">Less than monthly</option>
+                                                <option value="Monthly">Monthly</option>
+                                                <option value="Weekly">Weekly</option>
+                                                <option value="Daily or almost daily">Daily or almost daily</option>
+                                            </select>
+                                        </label>
+                                    </div>
+                                    <div class="question-item">
+                                        <label>
+                                            <span class="question">7. How often during the last year have you had a feeling of guilt or remorse after drinking?</span>
+                                            <select name="AUDIT_7" class="form-control" required>
+                                                <option disabled selected value>Select One</option>
+                                                <option value="Never">Never</option>
+                                                <option value="Less than monthly">Less than monthly</option>
+                                                <option value="Monthly">Monthly</option>
+                                                <option value="Weekly">Weekly</option>
+                                                <option value="Daily or almost daily">Daily or almost daily</option>
+                                            </select>
+                                        </label>
+                                    </div>
+                                    <div class="question-item">
+                                        <label>
+                                            <span class="question">8. How often during the last year have you been unable to remember what happened the night before because you had been drinking?</span>
+                                            <select name="AUDIT_8" class="form-control" required>
+                                                <option disabled selected value>Select One</option>
+                                                <option value="Never">Never</option>
+                                                <option value="Less than monthly">Less than monthly</option>
+                                                <option value="Monthly">Monthly</option>
+                                                <option value="Weekly">Weekly</option>
+                                                <option value="Daily or almost daily">Daily or almost daily</option>
+                                            </select>
+                                        </label>
+                                    </div>
+                                    <div class="question-item">
+                                        <label>
+                                            <span class="question">9. Have you or someone else been injured as a result of your drinking?</span>
+                                            <select name="AUDIT_9" class="form-control" required>
+                                                <option disabled selected value>Select One</option>
+                                                <option value="No">No</option>
+                                                <option value="Yes, but not in the last year">Yes, but not in the last year</option>
+                                                <option value="Yes, during the last year">Yes, during the last year</option>
+                                            </select>
+                                        </label>
+                                    </div>
+                                    <div class="question-item">
+                                        <label>
+                                            <span class="question">10. Has a relative or friend or a doctor or another health worker been concerned about your drinking or suggested you cut down?</span>
+                                            <select name="AUDIT_10" class="form-control" required>
+                                                <option disabled selected value>Select One</option>
+                                                <option value="No">No</option>
+                                                <option value="Yes, but not in the last year">Yes, but not in the last year</option>
+                                                <option value="Yes, during the last year">Yes, during the last year</option>
+                                            </select>
+                                        </label>
+                                    </div>
+                                </div>
+                                    <div class="step-navigation">
+                                        <button type="submit" name="action" value="previous" class="btn btn-secondary">Previous</button>
+                                        <button type="submit" name="action" value="next" class="btn btn-primary">Next Step</button>
+                                    </div>
+                                </div>
+                                    
+                                
+
+                                <!-- Step 6: Bipolar Screening -->
+                                <div class="assessment-step" id="step-6" data-step="6" style="display: none;">
+                                    <div class="section-title">Step 6: Bipolar Screening</div>
+                                <div class="assessment-instructions">
+                                    <p><strong>Instructions:</strong> Have there ever been times when you were not your usual self and...</p>
+                                    <p><em>Please answer Yes or No for each question.</em></p>
+                                </div>
+                                <div class="row">
+                                    <div class="question-item">
+                                        <label>
+                                            <span class="question">1. You felt so good or hyper that other people thought you were not your normal self or were so hyper that you got into trouble?</span>
+                                            <select name="BIPOLAR_1" class="form-control" required>
+                                                <option disabled selected value>Select One</option>
+                                                <option value="No">No</option>
+                                                <option value="Yes">Yes</option>
+                                            </select>
+                                        </label>
+                                    </div>
+                                    <div class="question-item">
+                                        <label>
+                                            <span class="question">2. You were so irritable that you shouted at people or started fights or arguments?</span>
+                                            <select name="BIPOLAR_2" class="form-control" required>
+                                                <option disabled selected value>Select One</option>
+                                                <option value="No">No</option>
+                                                <option value="Yes">Yes</option>
+                                            </select>
+                                        </label>
+                                    </div>
+                                    <div class="question-item">
+                                        <label>
+                                            <span class="question">3. You felt much more self-confident than usual?</span>
+                                            <select name="BIPOLAR_3" class="form-control" required>
+                                                <option disabled selected value>Select One</option>
+                                                <option value="No">No</option>
+                                                <option value="Yes">Yes</option>
+                                            </select>
+                                        </label>
+                                    </div>
+                                    <div class="question-item">
+                                        <label>
+                                            <span class="question">4. You got much less sleep than usual and found you didn't really miss it?</span>
+                                            <select name="BIPOLAR_4" class="form-control" required>
+                                                <option disabled selected value>Select One</option>
+                                                <option value="No">No</option>
+                                                <option value="Yes">Yes</option>
+                                            </select>
+                                        </label>
+                                    </div>
+                                    <div class="question-item">
+                                        <label>
+                                            <span class="question">5. You were much more talkative or spoke faster than usual?</span>
+                                            <select name="BIPOLAR_5" class="form-control" required>
+                                                <option disabled selected value>Select One</option>
+                                                <option value="No">No</option>
+                                                <option value="Yes">Yes</option>
+                                            </select>
+                                        </label>
+                                    </div>
+                                    <div class="question-item">
+                                        <label>
+                                            <span class="question">6. You had racing thoughts?</span>
+                                            <select name="BIPOLAR_6" class="form-control" required>
+                                                <option disabled selected value>Select One</option>
+                                                <option value="No">No</option>
+                                                <option value="Yes">Yes</option>
+                                            </select>
+                                        </label>
+                                    </div>
+                                    <div class="question-item">
+                                        <label>
+                                            <span class="question">7. You were so easily distracted that you had trouble concentrating?</span>
+                                            <select name="BIPOLAR_7" class="form-control" required>
+                                                <option disabled selected value>Select One</option>
+                                                <option value="No">No</option>
+                                                <option value="Yes">Yes</option>
+                                            </select>
+                                        </label>
+                                    </div>
+                                    <div class="question-item">
+                                        <label>
+                                            <span class="question">8. You were more active or did more things than usual?</span>
+                                            <select name="BIPOLAR_8" class="form-control" required>
+                                                <option disabled selected value>Select One</option>
+                                                <option value="No">No</option>
+                                                <option value="Yes">Yes</option>
+                                            </select>
+                                        </label>
+                                    </div>
+                                    <div class="question-item">
+                                        <label>
+                                            <span class="question">9. You were much more social or outgoing than usual?</span>
+                                            <select name="BIPOLAR_9" class="form-control" required>
+                                                <option disabled selected value>Select One</option>
+                                                <option value="No">No</option>
+                                                <option value="Yes">Yes</option>
+                                            </select>
+                                        </label>
+                                    </div>
+                                    <div class="question-item">
+                                        <label>
+                                            <span class="question">10. You did things that were unusual for you or that other people might have thought were excessive or risky?</span>
+                                            <select name="BIPOLAR_10" class="form-control" required>
+                                                <option disabled selected value>Select One</option>
+                                                <option value="No">No</option>
+                                                <option value="Yes">Yes</option>
+                                            </select>
+                                        </label>
+                                    </div>
+                                    <div class="question-item">
+                                        <label>
+                                            <span class="question">11. Spending money got you or your family into trouble?</span>
+                                            <select name="BIPOLAR_11" class="form-control" required>
+                                                <option disabled selected value>Select One</option>
+                                                <option value="No">No</option>
+                                                <option value="Yes">Yes</option>
+                                            </select>
+                                        </label>
+                                    </div>
+                                </div>
+                                    <div class="step-navigation">
+                                        <button type="submit" name="action" value="previous" class="btn btn-secondary">Previous</button>
+                                        <button type="submit" name="action" value="submit" class="btn btn-success">Complete Assessment</button>
+                                    </div>
+                                </div>
+
+                                <!-- Progress indicator -->
+                                <div class="progress-indicator">
+                                    <div class="progress-bar">
+                                        <div class="progress-fill" id="progress-fill"></div>
+                                    </div>
+                                    <div class="step-counter">
+                                        Step <span id="current-step-number">{{ session.get('current_step', 1) }}</span> of <span id="total-step-number">6</span>
+                                    </div>
+                                </div>
+
+                                {% if prediction %}
+                                <div class="result" id="result-message" style="display:none;">
+                                    <strong>Result:</strong> {{ prediction['prediction'] }}<br>
+                                    <strong>Score:</strong> {{ prediction['score'] }}
+                                </div>
+                                {% endif %}
+
+                            </div>
+
+            </div>
+
+                        </form>
+                    </div>
+                </div>
+        
+        </div>
+    </section>
+<script>
+document.addEventListener("DOMContentLoaded", function() {
+    // Initialize variables
+    var currentStep = 1;
+    var totalSteps = 6;
+    var assessmentData = {};
+
+    console.log('Initializing client-side step navigation');
+
+    // Show only the current step
+    function showStep(stepNumber) {
+        console.log('Showing step:', stepNumber);
+        
+        const steps = document.querySelectorAll('.assessment-step');
+        steps.forEach((step, index) => {
+            const stepNum = index + 1;
+            if (stepNum === stepNumber) {
+                step.style.display = 'block';
+            } else {
+                step.style.display = 'none';
+            }
+        });
+
+        // Update progress indicator
+        updateProgressIndicator(stepNumber);
+        
+        // Update current step
+        currentStep = stepNumber;
+        
+        // Update hidden form field
+        const currentStepInput = document.getElementById('current-step');
+        if (currentStepInput) {
+            currentStepInput.value = currentStep;
+        }
+    }
+
+    // Update progress indicator
+    function updateProgressIndicator(stepNumber) {
+        const progressFill = document.getElementById('progress-fill');
+        const currentStepNumber = document.getElementById('current-step-number');
+
+        if (progressFill) {
+            const progressPercent = (stepNumber / totalSteps) * 100;
+            progressFill.style.width = progressPercent + '%';
+        }
+
+        if (currentStepNumber) {
+            currentStepNumber.textContent = stepNumber;
+        }
+    }
+
+    // Validate current step - IMPROVED VERSION
+    function validateCurrentStep() {
+        const currentStepDiv = document.querySelector('.assessment-step[style*="block"]');
+        if (!currentStepDiv) return true;
+
+        const requiredFields = currentStepDiv.querySelectorAll('select[required], input[required]');
+        let isValid = true;
+        let invalidFields = [];
+
+        requiredFields.forEach(field => {
+            if (!field.value || field.value === '' || field.value === 'Select One') {
+                isValid = false;
+                invalidFields.push(field);
+                field.style.borderColor = '#dc3545';
+                field.style.backgroundColor = '#fff5f5';
+                field.style.boxShadow = '0 0 5px rgba(220, 53, 69, 0.5)';
+            } else {
+                field.style.borderColor = '#28a745';
+                field.style.backgroundColor = '#f8fff8';
+                field.style.boxShadow = '0 0 5px rgba(40, 167, 69, 0.3)';
+            }
+        });
+
+        if (!isValid) {
+            // Scroll to first invalid field
+            if (invalidFields.length > 0) {
+                invalidFields[0].scrollIntoView({ behavior: 'smooth', block: 'center' });
+                invalidFields[0].focus();
+            }
+            alert(`Please fill in all required fields before proceeding. (${invalidFields.length} fields missing)`);
+        }
+
+        return isValid;
+    }
+
+    // Save current step data
+    function saveCurrentStepData() {
+        const currentStepDiv = document.querySelector('.assessment-step[style*="block"]');
+        if (!currentStepDiv) return;
+
+        const formFields = currentStepDiv.querySelectorAll('input, select, textarea');
+        formFields.forEach(field => {
+            if (field.name && field.value && field.value !== 'Select One') {
+                assessmentData[field.name] = field.value;
+            }
+        });
+        
+        console.log('Saved step data:', assessmentData);
+    }
+
+    // Load saved data for current step
+    function loadSavedData() {
+        Object.keys(assessmentData).forEach(key => {
+            const field = document.querySelector(`[name="${key}"]`);
+            if (field && assessmentData[key] && assessmentData[key] !== 'Select One') {
+                field.value = assessmentData[key];
+            }
+        });
+    }
+
+    // Handle navigation button clicks
+    function handleNavigation(e) {
+        e.preventDefault(); // Prevent form submission
+        
+        const action = e.target.getAttribute('value') || e.target.getAttribute('data-action');
+        console.log('Navigation action:', action);
+
+        // Save current step data first
+        saveCurrentStepData();
+
+        if (action === 'next') {
+            // Validate before going to next step
+            if (!validateCurrentStep()) {
+                return false;
+            }
+            
+            if (currentStep < totalSteps) {
+                showStep(currentStep + 1);
+            }
+        } else if (action === 'previous') {
+            if (currentStep > 1) {
+                showStep(currentStep - 1);
+            }
+        } else if (action === 'submit') {
+            // Validate before submitting
+            if (!validateCurrentStep()) {
+                return false;
+            }
+            
+            // Change form action to submission endpoint and submit
+            const form = document.getElementById('survey-form');
+            if (form) {
+                // Add all saved data to form before submission
+                Object.keys(assessmentData).forEach(key => {
+                    let existingField = form.querySelector(`[name="${key}"]`);
+                    if (!existingField) {
+                        const hiddenField = document.createElement('input');
+                        hiddenField.type = 'hidden';
+                        hiddenField.name = key;
+                        hiddenField.value = assessmentData[key];
+                        form.appendChild(hiddenField);
+                    }
+                });
+                
+                form.action = '/assessment/submit';
+                form.submit();
+            }
+        }
+
+        return false; // Prevent any default action
+    }
+
+    // Add event listeners to all navigation buttons
+    const navButtons = document.querySelectorAll('.step-navigation button');
+    navButtons.forEach(button => {
+        button.addEventListener('click', handleNavigation);
+    });
+
+    // Prevent default form submission
+    const form = document.getElementById('survey-form');
+    if (form) {
+        form.addEventListener('submit', function(e) {
+            // Only allow submission if it's the final submit
+            if (!e.target.closest('button[value="submit"]')) {
+                e.preventDefault();
+                return false;
+            }
+        });
+    }
+
+    // Initialize the first step
+    showStep(1);
+    loadSavedData();
+
+    console.log('Client-side navigation initialized');
+});
+</script>
+</body>
+</html>

templates/home.html

@@ -0,0 +1,566 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Advanced Multi-Agent AI Mental Health Assistant with Voice Interaction, Crisis Detection, and Evidence-Based Assessments">
+    <meta name="keywords" content="mental health, AI chatbot, multi-agent system, voice interaction, crisis detection, PHQ-9, GAD-7, DAST-10, AUDIT, mental health assessment, CrewAI, RAG, Whisper AI, text-to-speech">
+    <meta name="robots" content="INDEX, FOLLOW">
+    <link rel="stylesheet" href="{{ url_for('static', filename='stylehome.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='mediahome.css') }}">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
+    <title>Bhutanese Mental Health Assistant</title>
+    <style>
+        /* Authentication modal styles */
+        .auth-overlay {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.7);
+            z-index: 1000;
+            justify-content: center;
+            align-items: center;
+        }
+        
+        .auth-modal {
+            background: white;
+            padding: 40px;
+            border-radius: 15px;
+            max-width: 400px;
+            width: 90%;
+            position: relative;
+            max-height: 90vh;
+            overflow-y: auto;
+        }
+        
+        .close-modal {
+            position: absolute;
+            top: 15px;
+            right: 15px;
+            font-size: 30px;
+            cursor: pointer;
+            color: #999;
+        }
+        
+        .close-modal:hover {
+            color: #333;
+        }
+        
+        .auth-tabs {
+            display: flex;
+            margin-bottom: 30px;
+            border-bottom: 2px solid #eee;
+        }
+        
+        .auth-tab {
+            flex: 1;
+            padding: 10px;
+            text-align: center;
+            cursor: pointer;
+            border-bottom: 3px solid transparent;
+            transition: all 0.3s;
+        }
+        
+        .auth-tab.active {
+            color: #667eea;
+            border-bottom-color: #667eea;
+        }
+        
+        .auth-form {
+            display: none;
+            font-family: 'Ubuntu', sans-serif;
+        }
+        
+        .auth-form.active {
+            display: block;
+
+        }
+        
+        .form-group {
+            margin-bottom: 20px;
+        }
+        
+        .form-group label {
+            display: block;
+            margin-bottom: 5px;
+            color: #333;
+            font-weight: 500;
+        }
+        
+        .form-control {
+            width: 100%;
+            padding: 12px;
+            border: 1px solid #ddd;
+            border-radius: 8px;
+            font-size: 16px;
+            box-sizing: border-box;
+        }
+        
+        .form-control:focus {
+            outline: none;
+            border-color: #667eea;
+        }
+        
+        .btn-auth {
+            width: 100%;
+            padding: 12px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            border: none;
+            border-radius: 8px;
+            font-size: 16px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: transform 0.2s;
+        }
+        
+        .btn-auth:hover {
+            transform: translateY(-2px);
+        }
+        
+        .guest-access {
+            text-align: center;
+            margin-top: 20px;
+            padding-top: 20px;
+            border-top: 1px solid #eee;
+            font-family: 'Ubuntu', sans-serif;
+        }
+        
+        .guest-link {
+            color: #667eea;
+            text-decoration: none;
+        }
+        
+        .guest-link:hover {
+            text-decoration: underline;
+        }
+        
+        /* Survey section styles */
+        /* #survey-section {
+            display: none;
+        }
+        
+        body.authenticated #survey-section {
+            display: block;
+        }
+        
+        body.authenticated .auth-prompt {
+            display: none;
+        }
+         */
+        /* Button styles */
+        .btn-primary {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            padding: 10px 20px;
+            border: none;
+            border-radius: 5px;
+            text-decoration: none;
+            display: inline-block;
+            cursor: pointer;
+            transition: all 0.3s;
+            font-size: 16px;
+            font-weight: 600;
+        }
+        
+        .btn-primary:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+        }
+        
+        .btn-secondary {
+            background: #6c757d;
+            color: white;
+            padding: 10px 20px;
+            border: none;
+            border-radius: 5px;
+            text-decoration: none;
+            display: inline-block;
+            cursor: pointer;
+            transition: background 0.3s;
+        }
+        
+        .btn-secondary:hover {
+            background: #5a6268;
+        }
+        
+        /* Authentication prompt styles */
+        .auth-prompt {
+            min-height: 60vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        /* Password strength indicator */
+        .password-strength {
+            font-size: 12px;
+            margin-top: 5px;
+            padding: 3px 8px;
+            border-radius: 3px;
+            display: inline-block;
+        }
+        
+        .password-strength.weak {
+            color: #dc3545;
+            background-color: #f8d7da;
+        }
+        
+        .password-strength.medium {
+            color: #856404;
+            background-color: #fff3cd;
+        }
+        
+        .password-strength.strong {
+            color: #155724;
+            background-color: #d4edda;
+        }
+        
+        .password-match-error {
+            color: #dc3545;
+            font-size: 12px;
+            margin-top: 5px;
+        }
+        
+        /* Error and success messages */
+        .error-message {
+            background: #f8d7da;
+            color: #721c24;
+            padding: 12px 20px;
+            border-radius: 5px;
+            margin-bottom: 20px;
+            text-align: center;
+            border: 1px solid #f5c6cb;
+            font-weight: 500;
+            animation: shake 0.5s ease-in-out;
+        }
+
+        @keyframes shake {
+            0%, 100% { transform: translateX(0); }
+            25% { transform: translateX(-10px); }
+            75% { transform: translateX(10px); }
+        }
+
+        .success-message {
+            background: #d4edda;
+            color: #155724;
+            padding: 12px 20px;
+            border-radius: 5px;
+            margin-bottom: 20px;
+            text-align: center;
+            border: 1px solid #c3e6cb;
+            font-weight: 500;
+        }
+    </style>
+</head>
+<body class="{% if session.user_id or session.is_guest %}authenticated{% endif %}"
+      data-signup-error="{{ signup_error|default('') }}"
+      data-login-error="{{ login_error|default('') }}"
+      data-show-signup="{{ show_signup_modal|default(false)|tojson }}"
+      data-show-login="{{ show_login_modal|default(false)|tojson }}">
+
+    <nav class="navbar">
+        <ul class="nav-Links">
+            <a href="{{ url_for('home') }}">
+                <div class="logo">
+                    <img src="{{ url_for('static', filename='mental-health_12560579.png') }}" alt="logo">
+                </div>
+            </a>
+            <div class="nav-item"><li><a href="{{ url_for('home') }}">Home</a></li></div>
+            <div class="nav-item"><li><a href="{{ url_for('chatbot') }}">ChatBot</a></li></div>
+            <div class="nav-item"><li><a href="{{ url_for('about') }}">About Us</a></li></div>
+            
+            {% if session.user_id %}
+            <div class="nav-item"><li><a href="#">Welcome, {{ session.username }}</a></li></div>
+            <div class="nav-item"><li><a href="{{ url_for('logout') }}">Logout</a></li></div>
+            {% else %}
+            <div class="nav-item"><li><a href="#" onclick="showAuthModal()">Login/Sign Up</a></li></div>
+            {% endif %}
+        </ul>
+    </nav>
+
+    <!-- Authentication Modal -->
+    <div class="auth-overlay" id="authOverlay">
+        <div class="auth-modal">
+            <span class="close-modal" onclick="closeAuthModal()">&times;</span>
+            
+            <div class="auth-tabs">
+                <div class="auth-tab active" onclick="switchTab('login')">Login</div>
+                <div class="auth-tab" onclick="switchTab('signup')">Sign Up</div>
+            </div>
+            
+            <!-- Login Form -->
+            <form class="auth-form active" id="loginForm" method="POST" action="{{ url_for('login') }}">
+                {% if login_error %}
+                <div class="error-message">{{ login_error }}</div>
+                {% endif %}
+                <div class="form-group">
+                    <label for="login-username">Username or Email</label>
+                    <input type="text" class="form-control" id="login-username" name="username" required>
+                </div>
+                <div class="form-group">
+                    <label for="login-password">Password</label>
+                    <input type="password" class="form-control" id="login-password" name="password" required>
+                </div>
+                <div class="form-group">
+                    <input type="checkbox" id="remember" name="remember">
+                    <label for="remember" style="display: inline; margin-left: 5px;">Remember me</label>
+                </div>
+                <button type="submit" class="btn-auth">Login</button>
+            </form>
+            
+            <!-- Signup Form -->
+            <form class="auth-form" id="signupForm" method="POST" action="{{ url_for('signup') }}">
+                {% if signup_error %}
+                <div class="error-message">{{ signup_error }}</div>
+                {% endif %}
+                <div class="form-group">
+                    <label for="signup-fullname">Full Name</label>
+                    <input type="text" class="form-control" id="signup-fullname" name="full_name" required>
+                </div>
+                <div class="form-group">
+                    <label for="signup-username">Username</label>
+                    <input type="text" class="form-control" id="signup-username" name="username" 
+                        pattern="[a-zA-Z0-9_]{3,20}" required>
+                </div>
+                <div class="form-group">
+                    <label for="signup-email">Email</label>
+                    <input type="email" class="form-control" id="signup-email" name="email" required>
+                </div>
+                <div class="form-group">
+                    <label for="signup-password">Password</label>
+                    <input type="password" class="form-control" id="signup-password" name="password" 
+                        minlength="8" required>
+                    <div id="password-strength"></div>
+                </div>
+                <div class="form-group">
+                    <label for="signup-confirm">Confirm Password</label>
+                    <input type="password" class="form-control" id="signup-confirm" name="confirm_password" required>
+                    <div id="password-match-error" class="password-match-error"></div>
+                </div>
+                <button type="submit" class="btn-auth">Sign Up</button>
+            </form>
+            
+            <div class="guest-access">
+                <p>Just exploring? <a href="{{ url_for('guest_access') }}" class="guest-link">Continue as Guest</a></p>
+            </div>
+        </div>
+    </div>
+
+   <!-- Landing Page Content -->
+{% if session.user_id %}
+<section class="firstsection auth-prompt" style="height: 100vh;">
+    <div class="box" >
+        <div class="container" style="text-align: center; padding: 50px; ">
+            <h1>Welcome back, {{ session.user_data.name }}!</h1>
+            <p style="font-size: 20px; color: #667eea; margin: 20px 0;">Ready to continue your mental wellness journey?</p>
+            
+            <div style="margin-top: 30px;">
+                <a href="{{ url_for('assessment') }}" class="btn btn-primary" style="margin: 10px; font-size: 18px; padding: 15px 30px;">Take Assessment</a>
+                <a href="{{ url_for('chatbot') }}" class="btn btn-secondary" style="margin: 10px; font-size: 18px; padding: 15px 30px;">Chat with Assistant</a>
+            </div>
+        </div>
+    </div>
+</section>
+{% elif not session.user_id and not session.is_guest %}
+<section class="firstsection auth-prompt">
+    <div class="box">
+        <div class="container" style="text-align: center; padding: 50px;">
+            <h1>Welcome to Bhutanese Mental Health AI Assistant</h1>
+            <p style="font-size: 20px; color: #667eea; margin: 20px 0;">Advanced Multi-Agent AI System for Comprehensive Mental Wellness Support</p>
+            
+            <div style="max-width: 800px; margin: 0 auto; text-align: left;">
+                <div style="background: #f8f9fa; padding: 30px; border-radius: 15px; margin: 30px 0;">
+                    <h2 style="color: #333; margin-bottom: 20px;">Bhutanese Mental Health Support Features:</h2>
+                    
+                    <div style="margin-bottom: 20px;">
+                        <h3 style="color: #667eea;">� Multi-Agent AI System</h3>
+                        <p>Experience our advanced AI chatbot powered by specialized agents including Crisis Detection, Mental Health Assessment, Knowledge Retrieval, and Personalized Recommendation systems using cutting-edge CrewAI technology.</p>
+                    </div>
+                    
+                    <div style="margin-bottom: 20px;">
+                        <h3 style="color: #667eea;">🎯 Scientifically-Backed Assessments</h3>
+                        <p>Take standardized mental health assessments including PHQ-9 (Depression), GAD-7 (Anxiety), DAST-10 (Substance Use), AUDIT (Alcohol Use), and Bipolar Disorder screening with immediate scoring and interpretation.</p>
+                    </div>
+                    
+                    <div style="margin-bottom: 20px;">
+                        <h3 style="color: #667eea;">🎤 Voice & Speech Integration</h3>
+                        <p>Interact naturally with voice recording capabilities, real-time speech-to-text transcription using Whisper AI, and text-to-speech responses for a more accessible and conversational experience.</p>
+                    </div>
+                    
+                    <div style="margin-bottom: 20px;">
+                        <h3 style="color: #667eea;">� Knowledge-Enhanced Responses</h3>
+                        <p>Get evidence-based guidance through our RAG (Retrieval-Augmented Generation) system that draws from comprehensive mental health knowledge bases and culturally sensitive resources for Bhutan.</p>
+                    </div>
+                    
+                    <div style="margin-bottom: 20px;">
+                        <h3 style="color: #667eea;">🆘 Crisis Detection & Support</h3>
+                        <p>Advanced AI monitors conversations for crisis indicators, providing immediate emergency resources and specialized support when needed, with direct access to Bhutanese mental health helplines.</p>
+                    </div>
+                    
+                    <div style="margin-bottom: 20px;">
+                        <h3 style="color: #667eea;">🔐 Privacy & Security First</h3>
+                        <p>Your data is protected with encryption, secure authentication, and the option to use our services anonymously as a guest. All conversations and assessments are stored securely.</p>
+                    </div>
+                </div>
+                
+                <div style="background: #e8f4fd; padding: 25px; border-radius: 15px; margin-bottom: 30px;">
+                    <h3 style="color: #0c5460; margin-bottom: 15px;">How Our Advanced System Works:</h3>
+                    <ol style="margin-left: 20px; line-height: 1.8;">
+                        <li><strong>Smart Authentication</strong> - Create a secure account or explore anonymously with guest access</li>
+                        <li><strong>AI-Powered Assessment</strong> - Complete standardized mental health screenings (PHQ-9, GAD-7, etc.) with instant scoring</li>
+                        <li><strong>Multi-Agent Chat System</strong> - Interact with specialized AI agents for crisis detection, condition classification, and personalized recommendations</li>
+                        <li><strong>Voice & Text Interaction</strong> - Chat via text or voice with real-time transcription and text-to-speech responses</li>
+                        <li><strong>Knowledge-Enhanced Support</strong> - Receive evidence-based guidance from our comprehensive mental health knowledge base</li>
+                        <li><strong>Progress Tracking</strong> - Monitor your mental wellness journey with saved assessments and chat history</li>
+                        <li><strong>Emergency Support</strong> - Automatic crisis detection with immediate access to local Bhutanese mental health resources</li>
+                    </ol>
+                </div>
+            </div>
+            
+            <div style="margin-top: 30px; display: flex; justify-content: center; flex-direction: column; align-items: center;">
+                <button class="btn btn-primary" onclick="showAuthModal()" style="margin: 10px; font-size: 18px; padding: 15px 30px;">🚀 Start Your Journey</button>
+                <a href="{{ url_for('guest_access') }}" class="btn btn-secondary" style="margin: 10px; font-size: 18px; padding: 15px 30px;">👤 Try as Guest</a>
+                <p style="margin-top: 15px; font-size: 14px; color: #888;">
+                    ✨ Featuring: Multi-Agent AI • Voice Interaction • Crisis Detection • Evidence-Based Assessments
+                </p>
+            </div>
+            
+            <p style="margin-top: 20px; font-style: italic; color: #666;">
+                <strong>Powered by Advanced AI:</strong> Our system uses CrewAI multi-agent technology, Whisper speech recognition, RAG knowledge retrieval, and evidence-based assessment tools. This tool is for support and assessment only - for emergencies or serious concerns, please consult healthcare professionals or contact emergency services.
+            </p>
+        </div>
+    </div>
+</section>
+{% endif %} 
+    <!-- JavaScript -->
+    <script>
+    // Auth modal functions
+    function showAuthModal() {
+        document.getElementById('authOverlay').style.display = 'flex';
+    }
+    
+    function closeAuthModal() {
+        document.getElementById('authOverlay').style.display = 'none';
+    }
+    
+    function switchTab(tab) {
+        document.querySelectorAll('.auth-tab').forEach(t => t.classList.remove('active'));
+        document.querySelectorAll('.auth-form').forEach(f => f.classList.remove('active'));
+        if (tab === 'login') {
+            document.querySelector('.auth-tab:nth-child(1)').classList.add('active');
+            document.getElementById('loginForm').classList.add('active');
+        } else {
+            document.querySelector('.auth-tab:nth-child(2)').classList.add('active');
+            document.getElementById('signupForm').classList.add('active');
+        }
+    }
+    
+    // Close modal when clicking outside
+    document.getElementById('authOverlay').addEventListener('click', function(e) {
+        if (e.target === this) {
+            closeAuthModal();
+        }
+    });
+    
+    document.addEventListener("DOMContentLoaded", function() {
+        // Auth modal error handling
+        const body = document.body;
+        const signupError = body.getAttribute('data-signup-error');
+        const loginError = body.getAttribute('data-login-error');
+        const showSignupModal = body.getAttribute('data-show-signup') === 'true';
+        const showLoginModal = body.getAttribute('data-show-login') === 'true';
+
+        // Handle signup errors and modal display
+        if (showSignupModal || signupError) {
+            setTimeout(() => {
+                showAuthModal();
+                switchTab('signup');
+            }, 100);
+        }
+
+        // Handle login errors and modal display
+        if (showLoginModal || loginError) {
+            setTimeout(() => {
+                showAuthModal();
+                switchTab('login');
+            }, 100);
+        }
+
+        // Password strength checker
+        const passwordInput = document.getElementById('signup-password');
+        if (passwordInput) {
+            passwordInput.addEventListener('input', function(e) {
+                const password = e.target.value;
+                const strengthDiv = document.getElementById('password-strength');
+                if (!password) {
+                    strengthDiv.textContent = '';
+                    strengthDiv.className = 'password-strength';
+                    return;
+                }
+                if (password.length < 8) {
+                    strengthDiv.textContent = 'Too short (min 8 characters)';
+                    strengthDiv.className = 'password-strength weak';
+                } else if (password.match(/^[a-zA-Z]+$/) || password.match(/^[0-9]+$/)) {
+                    strengthDiv.textContent = 'Weak - add numbers and symbols';
+                    strengthDiv.className = 'password-strength weak';
+                } else if (password.match(/^[a-zA-Z0-9]+$/)) {
+                    strengthDiv.textContent = 'Medium - add symbols';
+                    strengthDiv.className = 'password-strength medium';
+                } else {
+                    strengthDiv.textContent = 'Strong password';
+                    strengthDiv.className = 'password-strength strong';
+                }
+            });
+        }
+
+        // Real-time password match validation
+        const confirmInput = document.getElementById('signup-confirm');
+        if (confirmInput) {
+            confirmInput.addEventListener('input', function(e) {
+                const password = document.getElementById('signup-password').value;
+                const confirmPassword = e.target.value;
+                const matchError = document.getElementById('password-match-error');
+                if (confirmPassword && password !== confirmPassword) {
+                    matchError.textContent = 'Passwords do not match';
+                    e.target.style.borderColor = '#dc3545';
+                } else if (confirmPassword && password === confirmPassword) {
+                    matchError.textContent = '';
+                    e.target.style.borderColor = '#28a745';
+                } else {
+                    matchError.textContent = '';
+                    e.target.style.borderColor = '';
+                }
+            });
+        }
+
+        // Signup form validation
+        const signupForm = document.getElementById('signupForm');
+        if (signupForm) {
+            signupForm.addEventListener('submit', function(e) {
+                const password = document.getElementById('signup-password').value;
+                const confirmPassword = document.getElementById('signup-confirm').value;
+                if (password !== confirmPassword) {
+                    e.preventDefault();
+                    alert('Passwords do not match!');
+                    document.getElementById('signup-confirm').focus();
+                    return false;
+                }
+                if (password.length < 8) {
+                    e.preventDefault();
+                    alert('Password must be at least 8 characters long');
+                    document.getElementById('signup-password').focus();
+                    return false;
+                }
+            });
+        }
+    });
+    </script>
+</body>
+</html>

templates/initial_survey.html

@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Initial Assessment - Mental Health Assistant</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='stylehome.css') }}">
+    <style>
+        .survey-intro {
+            text-align: center;
+            max-width: 600px;
+            margin: 50px auto;
+            padding: 40px;
+            background: white;
+            border-radius: 15px;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+        }
+        
+        .survey-intro h1 {
+            color: #667eea;
+            margin-bottom: 20px;
+        }
+        
+        .survey-intro p {
+            color: #666;
+            line-height: 1.6;
+            margin-bottom: 30px;
+        }
+        
+        .benefits {
+            text-align: left;
+            background: #f8f9fa;
+            padding: 20px;
+            border-radius: 10px;
+            margin: 20px 0;
+        }
+        
+        .benefits li {
+            margin: 10px 0;
+            color: #333;
+        }
+        
+        .btn-start-survey {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            padding: 15px 40px;
+            border: none;
+            border-radius: 8px;
+            font-size: 18px;
+            cursor: pointer;
+            transition: transform 0.2s;
+        }
+        
+        .btn-start-survey:hover {
+            transform: translateY(-2px);
+        }
+        
+        .skip-option {
+            margin-top: 20px;
+            color: #999;
+        }
+    </style>
+</head>
+<body>
+    <div class="survey-intro">
+        <h1>Welcome, {{ session.user_data.name }}!</h1>
+        <p>Before we begin, we'd like to understand your current mental health status better. 
+           This initial assessment will help us provide personalized support.</p>
+        
+        <div class="benefits">
+            <h3>Why take this assessment?</h3>
+            <ul>
+                <li>🎯 Get personalized mental health insights</li>
+                <li>📊 Track your progress over time</li>
+                <li>💡 Receive tailored recommendations</li>
+                <li>🔒 Your data is completely confidential</li>
+            </ul>
+        </div>
+        
+        <p><strong>Time required:</strong> 5-7 minutes</p>
+        
+        <form action="{{ url_for('home') }}" method="get">
+            <button type="submit" class="btn-start-survey">Start Assessment</button>
+        </form>
+        
+        <!-- Optional: Allow skipping for now -->
+        <!-- <div class="skip-option">
+            <a href="{{ url_for('chatbot') }}">Skip for now</a>
+        </div> -->
+    </div>
+</body>
+</html>

templates/user_dashboard.html

@@ -0,0 +1,178 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Welcome - Mental Health Assistant</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='stylehome.css') }}">
+    <style>
+        body {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-family: 'Roboto', sans-serif;
+        }
+        
+        .dashboard-container {
+            max-width: 600px;
+            width: 90%;
+            padding: 40px;
+            background: white;
+            border-radius: 15px;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+            text-align: center;
+        }
+        
+        .welcome-header {
+            margin-bottom: 40px;
+        }
+        
+        .welcome-header h1 {
+            color: #333;
+            margin-bottom: 10px;
+        }
+        
+        .welcome-header p {
+            color: #666;
+            font-size: 18px;
+        }
+        
+        .new-user-message {
+            background: #e8f4fd;
+            border: 1px solid #bee5eb;
+            color: #0c5460;
+            padding: 15px;
+            border-radius: 8px;
+            margin-bottom: 30px;
+        }
+        
+        .options-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 20px;
+            margin-top: 30px;
+        }
+        
+        .option-card {
+            padding: 30px 20px;
+            border: 2px solid #eee;
+            border-radius: 10px;
+            cursor: pointer;
+            transition: all 0.3s;
+            text-decoration: none;
+            color: #333;
+        }
+        
+        .option-card:hover {
+            border-color: #667eea;
+            transform: translateY(-5px);
+            box-shadow: 0 5px 20px rgba(102, 126, 234, 0.2);
+        }
+        
+        .option-card.recommended {
+            border-color: #667eea;
+            background: #f6f8ff;
+        }
+        
+        .option-icon {
+            font-size: 48px;
+            margin-bottom: 15px;
+        }
+        
+        .option-title {
+            font-size: 20px;
+            font-weight: 600;
+            margin-bottom: 10px;
+        }
+        
+        .option-desc {
+            color: #666;
+            font-size: 14px;
+        }
+        
+        .recommended-badge {
+            background: #667eea;
+            color: white;
+            font-size: 12px;
+            padding: 4px 8px;
+            border-radius: 4px;
+            margin-top: 10px;
+            display: inline-block;
+        }
+        
+        .last-assessment {
+            margin-top: 30px;
+            padding: 20px;
+            background: #f8f9fa;
+            border-radius: 10px;
+        }
+        
+        .logout-link {
+            margin-top: 30px;
+            display: inline-block;
+            color: #666;
+            text-decoration: none;
+            font-size: 14px;
+        }
+        
+        .logout-link:hover {
+            color: #333;
+            text-decoration: underline;
+        }
+        
+        @media (max-width: 600px) {
+            .options-grid {
+                grid-template-columns: 1fr;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="dashboard-container">
+        <div class="welcome-header">
+            <h1>Welcome{% if not session.user_data.has_completed_survey %} to GreenLife{% else %} back{% endif %}, {{ session.user_data.name }}!</h1>
+            <p>What would you like to do today?</p>
+        </div>
+        
+        {% if not session.user_data.has_completed_survey %}
+        <div class="new-user-message">
+            <strong>Welcome aboard!</strong> We recommend starting with a mental health assessment 
+            to help personalize your experience.
+        </div>
+        {% endif %}
+        
+        <div class="options-grid">
+        <a href="{{ url_for('assessment') }}" class="option-card {% if not session.user_data.has_completed_survey %}recommended{% endif %}">
+            <div class="option-icon">📋</div>
+            <div class="option-title">Take Assessment</div>
+            <div class="option-desc">Complete a mental health assessment to track your progress</div>
+            {% if not session.user_data.has_completed_survey %}
+            <div class="recommended-badge">Recommended</div>
+            {% endif %}
+        </a>
+            
+            <a href="{{ url_for('chatbot') }}" class="option-card">
+                <div class="option-icon">💬</div>
+                <div class="option-title">Chat with Assistant</div>
+                <div class="option-desc">Get support and guidance from our AI assistant</div>
+            </a>
+        </div>
+        
+        {% if session.user_data.has_completed_survey %}
+        <div class="last-assessment">
+            <p><strong>Previous Assessment:</strong> You've completed an assessment before.</p>
+            <p>Taking regular assessments helps track your mental health journey.</p>
+        </div>
+        {% else %}
+        <div class="last-assessment">
+            <p><strong>Note:</strong> You haven't completed an assessment yet.</p>
+            <p>We recommend taking one to get personalized insights.</p>
+        </div>
+        {% endif %}
+        
+        <a href="{{ url_for('logout') }}" class="logout-link">Logout</a>
+    </div>
+</body>
+</html>