pydetect-updated

src/app/case-details-page/case-details-page.component.html

@@ -146,7 +146,7 @@
           </button>
           <button type="button" class="detect-btn"
                   [disabled]="!c.caseId"
-                  (click)="c.caseId && goToDetect(c.caseId)"
+                  (click)="c.caseId && goToDetectWithMetadata(c)"
                   title="Go Detect" aria-label="Go Detect">
             Go Detect
           </button>

src/app/case-details-page/case-details-page.component.ts

@@ -166,6 +166,25 @@ export class CaseDetailsPageComponent implements OnInit {
     this.router.navigate(['/py-detect'], { state: { caseId } });
   }
 
+  goToDetectWithMetadata(c: PoliceCase): void {
+    const metadata = {
+      caseId: c.caseId || '',
+      crimeType: c.crime || '',
+      dateTime: c.dateTime || '',
+      location: c.police?.address || '',
+      suspectName: c.accused?.name || '',
+      status: c.status || '',
+      investigationOfficer: c.police?.name || '',
+      progress: this.getProgressValue(c),
+      progressStage: 'Interrogation',
+      sessionTime: '00:00:00'
+    };
+    localStorage.setItem('pyDetectMetadata', JSON.stringify(metadata)); // Save to localStorage
+    this.router.navigate(['/py-detect'], {
+      state: { metadata }
+    });
+  }
+
   navigateHome(): void {
     this.router.navigate(['/']);
   }

src/app/py-detect/py-detect.component.css

@@ -1,10 +1,8 @@
-/* Custom Styles */
+/* --- Crispy Modern Redesign --- */
 body, html {
-  background: url('/assets/background.jpg') no-repeat center center fixed;
-  background-color: #1a202c;
-  margin: 0;
-  padding: 0;
-  font-family: 'Inter', Arial, sans-serif;
+  font-family: 'Poppins', 'Inter', Arial, sans-serif;
+  background: #f6f8fa;
+  color: #23272b;
 }
 
 .h-full {
@@ -234,173 +232,411 @@ body, html {
 }
 
 .main-flex-layout {
+  display: grid;
+  grid-template-columns: 1fr 1.5fr;
+  gap: 32px;
+  margin: 32px auto 0 auto;
+  max-width: 1400px;
+  min-height: 80vh;
+  background: linear-gradient(120deg, #f6f8fa 60%, #e0f2fe 100%);
+  border-radius: 24px;
+  box-shadow: 0 8px 32px #38bdf822;
+  padding: 32px 32px 48px 32px;
+}
+
+.left-panel {
   display: flex;
-  flex-direction: row;
-  justify-content: space-between;
+  flex-direction: column;
+  gap: 18px;
+  justify-content: flex-start;
   align-items: flex-start;
-  width: 100%;
-  height: 80vh;
-  gap: 48px; /* Increased gap for more separation */
+  min-width: 555px;
+  max-width: 480px;
 }
 
-.question-section {
-  flex: 1;
+.right-panel {
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
-  justify-content: flex-start;
-  min-width: 420px;
-  max-width: 700px;
-  padding: 32px 24px 32px 32px;
-  position: relative;
+  gap: 24px;
+  align-items: stretch;
+  min-width: 400px;
 }
 
-.big-question {
-  background: #f0f4ff;
+/* Card style for summary/case info */
+.case-meta {
+  background: #fff;
   border-radius: 18px;
-  box-shadow: 0 2px 16px #2563eb22;
-  padding: 32px 28px;
-  color: #23272b;
-  font-size: 2.2rem;
-  font-weight: 700;
-  margin-bottom: 24px;
-  min-height: 100px;
-  max-width: 700px;
-  word-break: break-word;
-  text-align: left;
+  box-shadow: 0 2px 16px #38bdf822;
+  padding: 18px 24px;
+  margin-bottom: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  position: relative;
+}
+.case-meta::before {
+  content: '';
+  position: absolute;
+  top: 0; left: 0; right: 0; height: 6px;
+  background: linear-gradient(90deg, #38bdf8 0%, #6366f1 100%);
+  border-radius: 18px 18px 0 0;
+}
+
+/* Add avatar/icon for suspect/officer */
+.suspect-avatar {
+  width: 54px;
+  height: 54px;
+  border-radius: 50%;
+  object-fit: cover;
+  box-shadow: 0 2px 8px #38bdf844;
+  margin-right: 12px;
+}
+
+.case-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 2px;
+  border-radius: 8px;
+  padding: 2px 0;
+  font-size: 1.02rem;
+}
+.case-label {
+  color: #2563eb;
+  font-weight: 600;
+  min-width: 120px;
+}
+.case-value {
+  color: #e3f6ff;
+  font-weight: 500;
+}
+.divider-line {
+  border-top: 1.5px solid #e5e7eb;
+  margin: 10px 0 14px 0;
+}
+
+/* Button group for actions */
+.button-group {
+  display: flex;
+  gap: 12px;
+  margin: 18px 0 0 0;
+  justify-content: flex-end;
 }
 
-.big-question-animated {
-  animation: questionFadeIn 0.7s, pulseText 1.2s infinite alternate;
+.summary-toggle-btn,
+.back-btn,
+.evidence-toggle-btn,
+.btn-start-gradient,
+.evidence-submit-btn,
+.submit-evaluate-btn {
+  font-size: 0.92rem;
+  padding: 0.38rem 0.85rem;
+  border-radius: 8px;
+  font-family: 'Montserrat', 'Poppins', 'Arial Black', Arial, sans-serif;
+  font-weight: 700;
+  letter-spacing: 1px;
+  box-shadow: 0 2px 12px #38bdf844;
+  transition: background 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s;
 }
 
-@keyframes pulseText {
-  0% { text-shadow: 0 0 8px #38bdf8, 0 2px 8px #22222244; }
-  100% { text-shadow: 0 0 32px #38bdf8, 0 2px 24px #22222288; }
+.summary-toggle-btn:hover,
+.back-btn:hover,
+.evidence-toggle-btn:hover,
+.btn-start-gradient:hover,
+.evidence-submit-btn:hover,
+.submit-evaluate-btn:hover {
+  background: linear-gradient(90deg, #6366f1 0%, #38bdf8 100%);
+  color: #bae6fd;
+  box-shadow: 0 6px 32px #6366f1cc;
+  transform: scale(1.04);
 }
 
-@keyframes questionFadeIn {
-  from { opacity: 0; transform: translateY(24px); }
-  to { opacity: 1; transform: translateY(0); }
+/* Animated divider */
+.animated-divider {
+  width: 100%;
+  height: 4px;
+  background: linear-gradient(90deg, #38bdf8 0%, #6366f1 100%);
+  border-radius: 2px;
+  margin: 18px 0;
+  animation: dividerPulse 2s infinite alternate;
+}
+@keyframes dividerPulse {
+  0% { box-shadow: 0 0 8px #38bdf844; }
+  100% { box-shadow: 0 0 24px #6366f144; }
 }
 
-.video-section {
-  flex: 1;
+/* Camera/video preview card */
+.video-preview {
+  background: #374151;
+  border: 2px dashed #64748b;
+  border-radius: 18px;
+  box-shadow: 0 2px 16px #23272b44;
+  padding: 0;
+  width: 100%;
+  max-width: 921px;
+  min-height: 368px;
+  height: 368px;
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: flex-start;
-  min-width: 400px;
-  max-width: 100vw;
-  padding: 32px 32px 32px 0;
+  justify-content: center;
+  position: relative;
+  overflow: hidden;
 }
-
 .camera-video {
   border-radius: 18px;
-  border: 4px solid #38bdf8;
-  box-shadow: 0 0 24px #38bdf844, 0 0 8px #1e293b88;
+  border: none;
   background: #222;
   object-fit: cover;
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  max-height: 100%;
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+/* Camera inactive styles */
+.camera-inactive-block {
+  width: 100%;
+  height: 100%;
+  min-height: 368px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+.camera-placeholder-img {
+  width: 96px;
+  height: 96px;
+  object-fit: contain;
+  margin-bottom: 18px;
+  opacity: 0.7;
+}
+.camera-placeholder-icon {
+  font-size: 4rem;
+  color: #38bdf8;
   margin-bottom: 18px;
-  transition: box-shadow 0.4s, border 0.4s;
+  opacity: 0.7;
+}
+.camera-inactive-title {
+  font-size: 1.2rem;
+  color: #bae6fd;
+  font-weight: 700;
+  margin-bottom: 8px;
+}
+.camera-inactive-sub {
+  font-size: 1rem;
+  color: #fff;
+  opacity: 0.8;
 }
 
-.camera-video-large {
-  width: 60vw;
-  max-width: 800px;
-  height: 40vh;
-  max-height: 60vh;
+/* Footer */
+footer {
+  background: linear-gradient(to right, #011022, #01030a);
+  color: #fff;
+  text-align: center;
+  padding: 10px 0px;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
 }
 
-/* Animated buttons */
-.home-btn, .btn-start, .btn-stop, .btn-resume, .btn-submit, .back-btn {
+/* Evidence and summary sidebar styles restoration */
+.evidence-toggle-btn {
+  position: fixed;
+  top: 110px;
+  right: 32px;
+  z-index: 1202;
+  background: linear-gradient(90deg, #38bdf8 0%, #6366f1 100%);
+  color: #fff;
   font-family: 'Montserrat', 'Poppins', 'Arial Black', Arial, sans-serif;
-  font-size: 1.05rem;
+  font-size: 1rem;
   font-weight: 700;
-  letter-spacing: 2px;
-  background: linear-gradient(90deg, #38bdf8 0%, #23272b 100%);
-  color: #e3f6ff;
-  box-shadow: 0 2px 16px #38bdf888;
   border: none;
-  border-radius: 12px;
-  padding: 0.55rem 1.3rem;
-  margin: 0 0.3rem;
+  border-radius: 16px;
+  padding: 12px 28px;
+  box-shadow: 0 2px 16px #38bdf888;
   cursor: pointer;
-  transition: background 0.4s, box-shadow 0.4s, color 0.3s, transform 0.2s;
-  position: relative;
-  overflow: hidden;
+  transition: background 0.3s, box-shadow 0.3s, color 0.2s, transform 0.2s;
   animation: buttonPulse 1.2s infinite alternate;
 }
-
-.btn-start {
-  background: linear-gradient(90deg, #2563eb 0%, #6366f1 100%);
+.evidence-toggle-btn:hover {
+  background: linear-gradient(90deg, #6366f1 0%, #38bdf8 100%);
+  color: #bae6fd;
+  box-shadow: 0 6px 32px #6366f1cc;
+  transform: scale(1.04);
+}
+.summary-toggle-btn {
+  position: fixed;
+  top: 160px;
+  right: 32px;
+  z-index: 1202;
+  background: linear-gradient(90deg, #38bdf8 0%, #6366f1 100%);
   color: #fff;
-  font-size: 1.25rem;
+  font-family: 'Montserrat', 'Poppins', 'Arial Black', Arial, sans-serif;
+  font-size: 1rem;
   font-weight: 700;
-  padding: 0.7rem 2.2rem;
-  border-radius: 999px;
-  box-shadow: 0 4px 24px #6366f188, 0 2px 8px #2563eb44;
-  transition: background 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
   border: none;
-  outline: none;
-  letter-spacing: 2px;
-  position: relative;
-  overflow: hidden;
+  border-radius: 16px;
+  padding: 12px 28px;
+  box-shadow: 0 2px 16px #38bdf888;
+  cursor: pointer;
+  transition: background 0.3s, box-shadow 0.3s, color 0.2s, transform 0.2s;
   animation: buttonPulse 1.2s infinite alternate;
 }
-
-.btn-start:hover {
-  background: linear-gradient(90deg, #6366f1 0%, #2563eb 100%);
-  color: #e0e7ff;
-  transform: scale(1.05);
+.summary-toggle-btn:hover {
+  background: linear-gradient(90deg, #6366f1 0%, #38bdf8 100%);
+  color: #bae6fd;
   box-shadow: 0 6px 32px #6366f1cc;
+  transform: scale(1.04);
 }
-
-.btn-submit {
+.evidence-sidebar, .summary-sidebar {
   position: fixed;
-  right: 32px;
-  bottom: 32px;
-  z-index: 1000;
-  font-family: 'Montserrat', 'Poppins', 'Arial Black', Arial, sans-serif;
+  top: 90px;
+  right: -35vw;
+  width: 35vw;
+  max-width: 562px;
+  height: 60vh;
+  min-height: 340px;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: stretch;
+  background: rgba(30, 41, 59, 0.97);
+  box-shadow: 0 8px 32px #38bdf844, 0 2px 16px #6366f144;
+  border-radius: 24px 0 0 24px;
+  z-index: 1201;
+  transition: right 0.35s cubic-bezier(.23,1,.32,1);
+  color: #fff;
+  overflow-y: auto;
+  backdrop-filter: blur(18px);
+  -webkit-backdrop-filter: blur(18px);
+  border: 2.5px solid #38bdf8;
+  animation: fadeInPanel 0.7s cubic-bezier(.23,1,.32,1);
+}
+.evidence-sidebar.open, .summary-sidebar.open {
+  right: 0;
+}
+.evidence-title-bar, .summary-title-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 18px;
+  padding: 24px 32px 0 32px;
+}
+.evidence-title, .summary-title {
+  font-size: 1.3rem;
+  font-weight: 700;
+  color: #38bdf8;
+  letter-spacing: 1px;
+}
+.evidence-close-btn, .summary-close-btn {
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  color: #38bdf8;
+  cursor: pointer;
+}
+.evidence-form-card, .summary-content-card {
+  background: rgba(44, 54, 74, 0.98);
+  border-radius: 18px;
+  box-shadow: 0 2px 16px #38bdf822;
+  margin: 24px 24px 24px 24px;
+  padding: 32px 36px 24px 36px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  color: #fff;
+}
+.evidence-upload-form {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  width: 100%;
+}
+.evidence-upload-row {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  margin-bottom: 8px;
+  color: #fff;
+}
+.evidence-upload-label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 1.08rem;
+  font-weight: 600;
+  color: #fff;
+  min-width: 160px;
+}
+.evidence-field-icon {
+  font-size: 1.3rem;
+  color: #38bdf8;
+}
+.evidence-summary-row {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-top: 12px;
+  width: 100%;
+}
+.evidence-summary-label {
   font-size: 1.05rem;
+  font-weight: 600;
+  color: #fff;
+  margin-bottom: 2px;
+}
+.evidence-summary-textarea {
+  border-radius: 8px;
+  border: 1.5px solid #38bdf8;
+  padding: 8px 12px;
+  font-size: 1rem;
+  background: #232b3e;
+  color: #fff;
+  resize: vertical;
+  min-height: 48px;
+  width: 100%;
+}
+.evidence-submit-btn {
+  margin-top: 18px;
+  background: linear-gradient(90deg, #38bdf8 0%, #6366f1 100%);
+  color: #fff;
+  font-family: 'Montserrat', 'Poppins', 'Arial Black', Arial, sans-serif;
+  font-size: 1.08rem;
   font-weight: 700;
-  letter-spacing: 2px;
-  background: linear-gradient(90deg, #38bdf8 0%, #23272b 100%);
-  color: #e3f6ff;
-  box-shadow: 0 2px 16px #38bdf888;
   border: none;
   border-radius: 12px;
   padding: 0.55rem 1.3rem;
-  margin: 0 0.3rem;
+  box-shadow: 0 2px 16px #38bdf888;
   cursor: pointer;
   transition: background 0.4s, box-shadow 0.4s, color 0.3s, transform 0.2s;
-  overflow: hidden;
-  animation: buttonPulse 1.2s infinite alternate;
-}
-
-@keyframes buttonPulse {
-  0% { box-shadow: 0 2px 16px #38bdf888; transform: scale(1); }
-  100% { box-shadow: 0 2px 32px #bae6fd88; transform: scale(1.07); }
+  letter-spacing: 1px;
+  width: 140px;
+  display: block;
 }
-
-.home-btn:hover, .btn-start:hover, .btn-stop:hover, .btn-resume:hover, .btn-submit:hover, .back-btn:hover {
-  background: linear-gradient(90deg, #23272b 0%, #38bdf8 100%);
+.evidence-submit-btn:hover {
+  background: linear-gradient(90deg, #6366f1 0%, #38bdf8 100%);
   color: #bae6fd;
-  box-shadow: 0 2px 24px #bae6fd88;
-  animation: buttonPulse 0.7s;
+  box-shadow: 0 6px 32px #6366f1cc;
+  transform: scale(1.04);
 }
 
-.fade-out {
-  opacity: 0.4;
-  pointer-events: none;
-  transition: opacity 0.5s;
+/* Prevent page scroll */
+body, html {
+  overflow: hidden !important;
+  height: 100vh;
 }
-
-.global-bottom-left-btn {
-  position: fixed;
-  left: 24px;
-  bottom: 24px;
-  z-index: 1000;
+.main-flex-layout {
+  max-height: calc(100vh - 60px);
+  overflow: hidden;
 }
 
 /* Modern UI header styles from infopage */
@@ -503,422 +739,500 @@ body, html {
     text-shadow: 0 0 6px #38bdf8;
   }
 
-/* Footer */
-footer {
-  background: linear-gradient(to right, #011022, #01030a);
-  color: #fff;
-  text-align: center;
-  padding: 10px 0px;
-  position: fixed;
-  bottom: 0;
-  left: 0;
+.header-action-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   width: 100%;
+  position: relative;
+  margin-top: 0;
+  margin-bottom: 0;
+  padding: 0 32px 18px 32px;
+  min-height: 96px;
+  box-sizing: border-box;
 }
-
-
-/* Left Panel */
-.left-panel {
-  flex: 1;
+.header-action-left {
   display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  padding: 32px 24px 32px 32px;
-  min-width: 420px;
-  max-width: 700px;
-}
-.case-meta {
-  margin-bottom: 24px;
-  font-size: 1.1rem;
-  color: #6366f1;
-}
-.case-id-value {
-  color: #fbbf24;
-  font-weight: bold;
+  align-items: center;
+  gap: 12px;
+  height: 40px;
 }
-.officer-value {
-  color: #38bdf8;
-  font-weight: bold;
+.header-action-right {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  height: 40px;
+  position: absolute;
+  top: 18px;
+  right: 32px;
+  z-index: 100;
 }
-.progress-label {
-  color: #38bdf8;
-}
-.progress-value {
-  color: #fff;
-  background: #2563eb;
-  border-radius: 6px;
-  padding: 2px 8px;
-  font-weight: 700;
-}
-
-/* Question Card */
-.question-card {
-  background: #f0f4ff;
-  border-radius: 18px;
-  box-shadow: 0 2px 16px #2563eb22;
-  padding: 32px 28px;
-  margin-bottom: 18px;
-  min-height: 120px;
-  width: 100%;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-}
-.question-typewriter {
-  font-size: 2.1rem;
+.header-action-bar .small-btn,
+.header-action-bar .summary-toggle-btn,
+.header-action-bar .evidence-toggle-btn {
+  font-size: 1.08rem;
+  font-family: 'Montserrat', 'Poppins', 'Arial Black', Arial, sans-serif;
   font-weight: 700;
-  color: #23272b;
-  min-height: 48px;
-  width: 100%;
-  animation: typewriter 2.2s steps(40, end) 1;
-  white-space: pre-line;
-  overflow: hidden;
-  border-right: 2px solid #2563eb;
-}
-@keyframes typewriter {
-  from { width: 0; }
-  to { width: 100%; }
-}
-
-/* Audio Status & Waveform */
-.audio-status {
-  margin-top: 18px;
-  width: 100%;
+  letter-spacing: 1px;
+  background: linear-gradient(90deg, #38bdf8 0%, #6366f1 100%);
+  color: #fff;
+  border: none;
+  border-radius: 12px;
+  padding: 0.55rem 1.3rem;
+  box-shadow: 0 2px 16px #38bdf888;
   display: flex;
   align-items: center;
-  gap: 18px;
-}
-.recording-text {
-  color: #38bdf8;
-  font-weight: 700;
-  font-size: 1.1rem;
-  letter-spacing: 1px;
-  animation: pulseRecording 1.2s infinite alternate;
+  gap: 8px;
+  cursor: pointer;
+  transition: background 0.4s, box-shadow 0.4s, color 0.3s, transform 0.2s;
+  overflow: hidden;
+  height: 40px;
+  line-height: 1.2;
 }
-.processing-text {
-  color: #fbbf24;
-  font-weight: 700;
-  font-size: 1.1rem;
-  letter-spacing: 1px;
-  animation: pulseProcessing 1.2s infinite alternate;
+.header-action-bar .small-btn {
+  margin-left: 8px;
 }
-@keyframes pulseRecording {
-  0% { opacity: 0.7; }
-  100% { opacity: 1; }
+.header-action-bar .summary-toggle-btn {
+  margin-right: 8px;
 }
-@keyframes pulseProcessing {
-  0% { opacity: 0.7; }
-  100% { opacity: 1; }
+.header-action-bar .evidence-toggle-btn {
+  margin-right: 8px;
 }
-.waveform-animation {
-  width: 48px;
-  height: 24px;
-  display: inline-block;
-  background: none;
+.header-action-bar .small-btn:hover,
+.header-action-bar .summary-toggle-btn:hover,
+.header-action-bar .evidence-toggle-btn:hover {
+  background: linear-gradient(90deg, #6366f1 0%, #38bdf8 100%);
+  color: #bae6fd;
+  box-shadow: 0 6px 32px #6366f1cc;
+  transform: scale(1.04);
+}
+.header-divider-line {
+  width: calc(100% - 64px); /* 32px gap on both sides */
+  height: 2px;
+  background: linear-gradient(90deg, #38bdf8 0%, #6366f1 100%);
+  border-radius: 2px;
+  margin: 0 auto 18px auto;
+  box-shadow: 0 2px 8px #38bdf844;
   position: relative;
-}
-.waveform-animation::before {
-  content: '';
-  display: block;
-  width: 100%;
-  height: 100%;
-  background: url('data:image/svg+xml;utf8,<svg width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="2" y="10" width="4" height="4" rx="2" fill="%2338bdf8"><animate attributeName="height" values="4;16;4" dur="1s" repeatCount="indefinite"/></rect><rect x="10" y="6" width="4" height="12" rx="2" fill="%2338bdf8"><animate attributeName="height" values="12;4;12" dur="1s" repeatCount="indefinite"/></rect><rect x="18" y="10" width="4" height="4" rx="2" fill="%2338bdf8"><animate attributeName="height" values="4;16;4" dur="1s" repeatCount="indefinite"/></rect><rect x="26" y="6" width="4" height="12" rx="2" fill="%2338bdf8"><animate attributeName="height" values="12;4;12" dur="1s" repeatCount="indefinite"/></rect><rect x="34" y="10" width="4" height="4" rx="2" fill="%2338bdf8"><animate attributeName="height" values="4;16;4" dur="1s" repeatCount="indefinite"/></rect><rect x="42" y="6" width="4" height="12" rx="2" fill="%2338bdf8"><animate attributeName="height" values="12;4;12" dur="1s" repeatCount="indefinite"/></rect></svg>') no-repeat center center;
+  top: -19px;
 }
 
-/* Controls Row */
-.controls-row {
-  display: flex;
-  gap: 18px;
-  margin-top: 18px;
-}
-.btn-start-gradient {
-  background: linear-gradient(90deg, #2563eb 0%, #6366f1 100%);
-  color: #fff;
-  font-size: 1.25rem;
-  font-weight: 700;
-  padding: 0.7rem 2.2rem;
-  border-radius: 999px;
-  box-shadow: 0 4px 24px #6366f188, 0 2px 8px #2563eb44;
-  transition: background 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
-  border: none;
-  outline: none;
-  letter-spacing: 2px;
-  position: relative;
-  overflow: hidden;
-  animation: buttonPulse 1.2s infinite alternate;
-}
-.btn-start-gradient:hover {
-  background: linear-gradient(90deg, #6366f1 0%, #2563eb 100%);
-  color: #e0e7ff;
-  transform: scale(1.05);
-  box-shadow: 0 6px 32px #6366f1cc;
-}
-.btn-pause {
-  background: #fbbf24;
-  color: #23272b;
-  font-weight: 700;
-  border-radius: 999px;
-  padding: 0.7rem 1.5rem;
-  border: none;
-  font-size: 1.1rem;
-  box-shadow: 0 2px 8px #fbbf2444;
-  transition: background 0.2s, color 0.2s;
-}
-.btn-skip {
-  background: #e0e7ff;
-  color: #6366f1;
-  font-weight: 700;
-  border-radius: 999px;
-  padding: 0.7rem 1.5rem;
-  border: none;
-  font-size: 1.1rem;
-  box-shadow: 0 2px 8px #6366f144;
-  transition: background 0.2s, color 0.2s;
+.blur-bg {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 1200;
+  background: rgba(30,41,59,0.18);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  transition: opacity 0.3s;
+  opacity: 1;
+  pointer-events: auto;
+}
+.blur-bg.hide {
+  opacity: 0;
+  pointer-events: none;
 }
 
-/* Right Panel */
-.right-panel {
-  flex: 1;
+.tts-question-card {
+  background: linear-gradient(120deg, #f6f8fa 60%, #bae6fd 100%);
+  border-radius: 18px;
+  box-shadow: 0 8px 32px #38bdf822, 0 2px 16px #6366f144;
+  padding: 32px 36px 24px 36px;
+  margin: 0 0 18px 0;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  padding: 32px 32px 32px 0;
-  min-width: 400px;
-  max-width: 100vw;
-}
-.video-preview {
-  margin-bottom: 18px;
-  margin-left: 48px; /* Ensure this matches transcript-panel */
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  min-height: 285px;
-  background: #374151;
-  border: 2px dashed #64748b;
-  border-radius: 16px;
-  box-shadow: 0 2px 16px #23272b44;
-  padding: 32px 0;
+  position: relative;
+  animation: fadeInUp 0.7s cubic-bezier(.39,.58,.57,1);
+  min-height: 180px;
+  max-width: 480px;
   width: 100%;
-  max-width: 995px;
-}
-.camera-video {
-  border-radius: 18px;
-  border: 4px solid #38bdf8;
-  box-shadow: 0 0 24px #38bdf844, 0 0 8px #1e293b88;
-  background: #222;
-  object-fit: cover;
-  margin-bottom: 18px;
-  transition: box-shadow 0.4s, border 0.4s;
+  z-index: 1;
 }
-.camera-video-large {
-  width: 60vw;
-  max-width: 800px;
-  height: 40vh;
-  max-height: 60vh;
-}
-.camera-inactive-block {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  min-height: 260px;
-  color: #a0aec0;
-}
-.camera-inactive-icon {
-  font-size: 4rem;
-  color: #64748b;
-  margin-bottom: 18px;
+.tts-question-title {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: #2563eb;
+  margin-bottom: 10px;
+  letter-spacing: 1px;
+  text-shadow: 0 2px 12px #38bdf844;
 }
-.camera-inactive-title {
-  font-size: 1.4rem;
+.tts-question-text {
+  font-size: 1.12rem;
+  color: #23272b;
   font-weight: 600;
-  color: #cbd5e1;
-  margin-bottom: 6px;
+  margin-bottom: 8px;
+  text-shadow: 0 1px 8px #bae6fd44;
 }
-.camera-inactive-sub {
+.tts-status-row {
   font-size: 1.05rem;
-  color: #94a3b8;
+  color: #6366f1;
+  font-weight: 500;
+  margin-bottom: 4px;
+  background: rgba(56,189,248,0.08);
+  border-radius: 8px;
+  padding: 6px 14px;
+  box-shadow: 0 2px 8px #38bdf822;
+  display: inline-block;
+  animation: statusPulse 1.2s infinite alternate;
+}
+@keyframes statusPulse {
+  0% { box-shadow: 0 2px 8px #38bdf822; }
+  100% { box-shadow: 0 4px 16px #6366f144; }
 }
 
 /* Transcript Panel */
 .transcript-panel {
-  margin-left: 48px; /* Match video-preview for alignment */
   background: #fff;
   border-radius: 14px;
   box-shadow: 0 2px 12px #6366f122;
   padding: 18px 18px 18px 18px;
   width: 100%;
-  max-width: 962px;
+  max-width: 889px;
   overflow: hidden;
   display: flex;
   flex-direction: column;
 }
+
 .transcript-title {
   font-weight: 700;
   color: #6366f1;
   margin-bottom: 8px;
 }
+
 .transcript-scrollable {
   overflow-y: auto;
   max-height: 180px;
   padding-right: 8px;
 }
+
 .transcript-line {
   font-size: 1.05rem;
   color: #23272b;
   margin-bottom: 4px;
 }
 
-/* Completion Summary Modal */
-.summary-modal {
+
+
+/* Evidence Panel Sidebar Styles */
+.evidence-toggle-btn {
+  display: block;
+  position: relative;
+  margin: 2px 0 0 auto;
+  background: linear-gradient(90deg, #38bdf8 0%, #6366f1 100%);
+  color: #fff;
+  font-family: 'Poppins', 'Inter', Arial, sans-serif;
+  font-size: 1rem;
+  font-weight: 600;
+  border: none;
+  border-radius: 8px 8px 0 0;
+  padding: 10px 22px;
+  box-shadow: 0 2px 12px #38bdf844;
+  cursor: pointer;
+  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
+  z-index: 1200;
+}
+
+  .evidence-toggle-btn:hover {
+    background: linear-gradient(90deg, #6366f1 0%, #38bdf8 100%);
+    color: #bae6fd;
+  }
+
+.evidence-sidebar {
   position: fixed;
-  top: 0; left: 0; right: 0; bottom: 0;
-  background: rgba(30,41,59,0.85);
-  z-index: 9999;
+  top: 90px;
+  right: -35vw;
+  width: 35vw;
+  max-width: 562px;
+  height: 60vh;
+  min-height: 340px;
+  padding: 0;
+  gap: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: stretch;
+  background: rgba(30, 41, 59, 0.97);
+  box-shadow: 0 8px 32px #38bdf844, 0 2px 16px #6366f144;
+  border-radius: 24px 0 0 24px;
+  z-index: 1201;
+  transition: right 0.35s cubic-bezier(.23,1,.32,1);
+  color: #fff;
+  overflow-y: auto;
+  backdrop-filter: blur(18px);
+  -webkit-backdrop-filter: blur(18px);
+  border: 2.5px solid #38bdf8;
+  animation: fadeInPanel 0.7s cubic-bezier(.23,1,.32,1);
+}
+
+  .evidence-sidebar.open {
+    right: 0;
+  }
+
+.evidence-title-bar {
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: space-between;
+  gap: 18px;
+  padding: 24px 32px 0 32px;
 }
-.summary-modal-content {
-  background: #fff;
-  border-radius: 18px;
-  box-shadow: 0 2px 32px #6366f1cc;
-  padding: 32px 40px;
-  min-width: 420px;
-  max-width: 700px;
+
+.evidence-title {
+  font-size: 1.3rem;
+  font-weight: 700;
+  color: #38bdf8;
+  letter-spacing: 1px;
 }
-.summary-qa-row {
-  margin-bottom: 18px;
+
+.evidence-form-card {
+  background: rgba(44, 54, 74, 0.98);
+  border-radius: 18px;
+  box-shadow: 0 2px 16px #38bdf822;
+  margin: 24px 24px 24px 24px;
+  padding: 24px 28px 18px 28px;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
 }
-.summary-question {
-  font-weight: 700;
-  color: #2563eb;
+
+.evidence-upload-form {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
 }
-.summary-answer {
-  color: #23272b;
-  margin-bottom: 4px;
+
+.evidence-upload-row {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  margin-bottom: 0;
 }
-.summary-duration {
+
+.evidence-upload-label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 1.08rem;
+  font-weight: 600;
   color: #6366f1;
-  font-size: 0.98em;
+  min-width: 160px;
+}
+
+.evidence-field-icon {
+  font-size: 1.3rem;
+  color: #38bdf8;
+}
+
+.evidence-divider {
+  border: none;
+  border-top: 1.5px solid #38bdf8;
+  margin: 12px 0 8px 0;
+}
+
+.evidence-summary-row {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
 }
-.btn-close-summary {
-  background: linear-gradient(90deg, #2563eb 0%, #6366f1 100%);
+
+.evidence-summary-label {
+  font-size: 1.05rem;
+  font-weight: 600;
+  color: #38bdf8;
+  margin-bottom: 2px;
+}
+
+.evidence-summary-textarea {
+  border-radius: 8px;
+  border: 1.5px solid #6366f1;
+  padding: 8px 12px;
+  font-size: 1rem;
+  background: #232b3e;
   color: #fff;
-  font-size: 1.1rem;
-  font-weight: 700;
-  padding: 0.7rem 2.2rem;
-  border-radius: 999px;
-  box-shadow: 0 4px 24px #6366f188, 0 2px 8px #2563eb44;
+  resize: vertical;
+  min-height: 48px;
+}
+
+.evidence-submit-btn {
+  margin-top: 12px;
+  background: linear-gradient(90deg, #2563eb 0%, #38bdf8 100%);
+  color: #fff;
+  font-family: 'Poppins', 'Inter', Arial, sans-serif;
+  font-size: 1rem;
+  font-weight: 600;
   border: none;
-  outline: none;
-  letter-spacing: 2px;
-  margin-top: 18px;
+  border-radius: 8px;
+  padding: 10px 22px;
+  box-shadow: 0 2px 12px #38bdf844;
   cursor: pointer;
+  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
+  letter-spacing: 1px;
 }
-.btn-close-summary:hover {
-  background: linear-gradient(90deg, #6366f1 0%, #2563eb 100%);
-  color: #e0e7ff;
-  transform: scale(1.05);
-  box-shadow: 0 6px 32px #6366f1cc;
+
+  .evidence-submit-btn:hover {
+    background: linear-gradient(90deg, #38bdf8 0%, #2563eb 100%);
+    color: #bae6fd;
+  }
+
+.evidence-upload-form input[type="file"] {
+  background: #232b3e;
+  color: #fff;
+  border-radius: 6px;
+  border: 1px solid #6366f1;
+  padding: 4px 8px;
+  font-size: 0.98rem;
 }
 
-/* Info Card Styles */
-.info-card {
-  background: linear-gradient(135deg, #232b3e 60%, #232b3e 100%);
-  border: 2px solid #38bdf8;
-  border-radius: 14px;
-  box-shadow: 0 2px 16px #38bdf822;
-  padding: 32px 24px;
-  margin-bottom: 32px;
-  max-width: 520px;
-  text-align: center;
+.evidence-upload-icon {
+  font-size: 1.15em;
+  margin-right: 6px;
+  vertical-align: middle;
+}
+
+.back-btn {
+  font-size: 1.08rem;
+  font-family: 'Montserrat', 'Poppins', 'Arial Black', Arial, sans-serif;
+  font-weight: 700;
+  letter-spacing: 1px;
+  background: linear-gradient(90deg, #38bdf8 0%, #6366f1 100%);
   color: #fff;
+  border: none;
+  border-radius: 12px;
+  padding: 0.55rem 1.3rem;
+  box-shadow: 0 2px 16px #38bdf888;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  transition: background 0.4s, box-shadow 0.4s, color 0.3s, transform 0.2s;
+  overflow: hidden;
 }
-.info-title {
-  font-size: 2rem;
+
+.recording-status-bar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  justify-content: flex-start;
+  background: linear-gradient(90deg, #e0f2fe 0%, #bae6fd 100%);
+  color: #23272b;
+  font-size: 1.08rem;
   font-weight: 700;
-  margin-bottom: 12px;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px #38bdf822;
+  padding: 8px 22px;
+  margin: 18px 0 0 0;
+  min-width: 220px;
+  max-width: 340px;
+  position: relative;
+  z-index: 2;
+  border: none;
+  outline: none;
+  cursor: default;
+  transition: none;
 }
-.info-desc {
-  font-size: 1.15rem;
-  color: #e2e8f0;
+.recording-status-bar .status-icon {
+  font-size: 1.3em;
+  margin-right: 6px;
+}
+.recording-status-bar .status-timer {
+  font-size: 1.08em;
+  font-weight: 600;
+  color: #2563eb;
 }
 
-/* Camera Inactive Card Styles */
-.camera-inactive-card {
-  background: linear-gradient(135deg, #232b3e 60%, #232b3e 100%);
-  border: 2px dashed #a0aec0;
-  border-radius: 14px;
-  box-shadow: 0 2px 16px #38bdf822;
-  padding: 48px 24px 32px 24px;
-  margin-bottom: 32px;
-  max-width: 600px;
-  min-height: 320px;
-  text-align: center;
-  color: #e2e8f0;
+.icon-btn {
+  background: linear-gradient(90deg, #38bdf8 0%, #6366f1 100%);
+  color: #fff;
+  border: none;
+  border-radius: 50%;
+  width: 44px;
+  height: 44px;
   display: flex;
-  flex-direction: column;
   align-items: center;
   justify-content: center;
+  font-size: 1.5rem;
+  box-shadow: 0 2px 12px #38bdf844;
+  margin-bottom: 0;
+  margin-top: 0;
+  margin-right: 8px;
+  cursor: pointer;
+  transition: background 0.3s, box-shadow 0.3s, color 0.2s, transform 0.2s;
 }
-.camera-icon {
-  margin-bottom: 18px;
-  color: #a0aec0;
+.icon-btn:hover {
+  background: linear-gradient(90deg, #6366f1 0%, #38bdf8 100%);
+  color: #bae6fd;
+  box-shadow: 0 6px 32px #6366f1cc;
+  transform: scale(1.08);
 }
 
-.button-bar {
+.header-actions-right-group {
+  position: absolute;
+  top: 18px;
+  right: 32px;
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 10px;
+}
+.header-actions-icons {
   display: flex;
   flex-direction: row;
-  justify-content: flex-end;
   align-items: center;
-  gap: 18px;
-  padding: 18px 32px 18px 32px;
-  box-shadow: 0 2px 12px #38bdf844;
-  border-bottom: 1px solid #23272b;
+  gap: 10px;
+  margin-top: 37px;
 }
-.header-btn {
-  font-family: 'Montserrat', 'Poppins', 'Arial Black', Arial, sans-serif;
-  font-size: 1.05rem;
-  font-weight: 700;
-  letter-spacing: 2px;
-  background: #fff;
+
+.guidance-tooltip {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: linear-gradient(90deg, #e0f2fe 0%, #bae6fd 100%);
   color: #2563eb;
-  border: 2px solid #2563eb;
+  font-size: 1.08rem;
+  font-weight: 600;
   border-radius: 12px;
-  padding: 0.55rem 1.3rem;
-  margin: 0 0.3rem;
-  cursor: pointer;
-  box-shadow: 0 2px 16px #38bdf888;
-  transition: background 0.2s, color 0.2s, box-shadow 0.2s, border 0.2s;
-}
-.header-btn.active, .header-btn:focus, .header-btn:hover {
-  background: #2563eb;
-  color: #fff;
-  border-color: #38bdf8;
-  box-shadow: 0 2px 24px #bae6fd88;
-}
-.home-btn {
-  background: #2563eb;
-  color: #fff;
-  border-color: #38bdf8;
-  box-shadow: 0 2px 24px #bae6fd88;
-}
-.home-btn:focus, .home-btn:hover {
-  background: #38bdf8;
+  box-shadow: 0 2px 12px #38bdf844;
+  padding: 6px 14px;
+  margin-top: 8px;
+  margin-left: 0;
+  position: absolute;
+  left: 32px;
+  top: 60px;
+  z-index: 101;
+  animation: fadeInTooltip 0.7s cubic-bezier(.39,.58,.57,1);
+  white-space: nowrap;
+}
+@keyframes fadeInTooltip {
+  0% { opacity: 0; transform: translateY(-12px); }
+  100% { opacity: 1; transform: translateY(0); }
+}
+
+.recording-indicator {
+  position: absolute;
+  top: 18px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: #ef4444;
   color: #fff;
+  font-size: 1.15rem;
+  font-weight: 700;
+  padding: 8px 22px;
+  border-radius: 16px;
+  box-shadow: 0 2px 12px #ef444488;
+  z-index: 10;
+  letter-spacing: 1px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  animation: fadeInRecording 0.5s cubic-bezier(.39,.58,.57,1);
 }
-.start-btn {
-  background: #fff;
-  color: #2563eb;
-}
-.camera-btn, .voice-btn, .tts-btn {
-  background: #e0e7ff;
-  color: #2563eb;
-  border-color: #2563eb;
-}
-.tts-btn.active {
-  background: #2563eb;
-  color: #fff;
+@keyframes fadeInRecording {
+  0% { opacity: 0; transform: translateX(-50%) scale(0.8); }
+  100% { opacity: 1; transform: translateX(-50%) scale(1); }
 }
+
+

src/app/py-detect/py-detect.component.html

@@ -17,98 +17,162 @@
         <span class="py-letter t2">T</span>
       </div>
     </div>
+    <div class="header-actions-right-group">
+      <button class="back-btn" (click)="navigateBackToCaseDetails()">
+        <span class="back-icon">←</span> Back to Case Details
+      </button>
+      <div class="header-actions-icons">
+        <button class="icon-btn" (click)="showEvidencePanel = !showEvidencePanel" title="Upload Evidence">
+          <i class="fas fa-file-upload"></i>
+        </button>
+        <button class="icon-btn" (click)="showSummaryPanel = !showSummaryPanel" title="Investigation Summary">
+          <i class="fas fa-clipboard-list"></i>
+        </button>
+      </div>
+    </div>
   </div>
 </div>
-
-<!-- Button Bar Below Header -->
-<div class="button-bar">
-  <button class="header-btn home-btn" (click)="navigateHome()">Home</button>
-  <button class="header-btn camera-btn" (click)="startCamera()">Start Camera</button>
-  <button class="header-btn voice-btn" (click)="startVoice()">Start Voice</button>
-  <button class="header-btn tts-btn" [class.active]="ttsEnabled()"> <i class="fas fa-volume-up"></i> TTS On</button>
-</div>
-
+<!-- Header action bar with buttons and divider line -->
+<div class="header-action-bar">
+  <div class="header-action-left" style="position:relative;">
+    <button class="small-btn" (click)="onStartRecording()">
+      <i class="fas fa-search"></i> Start Investigation
+    </button>
+    <div *ngIf="currentQuestionIndex < 0" class="guidance-tooltip">
+      <span style="font-size:1.3em;">💡</span>
+      Click Start Investigation to activate camera and begin questioning.
+    </div>
+  </div>
+  </div>
+<div class="header-divider-line"></div>
+<!-- Investigation Summary Toggle Button (moved below header, above camera box) -->
 <main class="main-flex-layout">
-  <!-- Left Panel: Controls & Question -->
+  <!-- Left Panel: Case Info + Question -->
   <section class="left-panel">
-    <div class="case-meta">
-      <div class="case-id">Case ID: <span class="case-id-value">{{ caseId }}</span></div>
-      <div class="officer">Officer: <span class="officer-value">{{ officer }}</span></div>
-      <div class="progress-label">Progress: <span class="progress-value">{{ progress }}%</span></div>
-    </div>
-    <div class="question-card">
-      <!-- Show Start button if no question is active -->
-      <div *ngIf="!currentQuestionText">
-        <button class="btn-start-gradient" (click)="onStartRecording()">
-          <i class="fas fa-search"></i> Start Investigation
-        </button>
+    <div class="animated-divider"></div>
+    <!-- Remove old question/status block, keep only the new decorated card -->
+    <div class="tts-question-card">
+      <div class="tts-question-title">Question {{ currentQuestionIndex + 1 }} of {{ totalQuestions }}</div>
+      <div class="tts-question-text">{{ currentQuestionText }}</div>
+      <div *ngIf="infoText" class="tts-status-row">{{ infoText }}</div>
+      <div *ngIf="status() === 'idle-wait'" class="tts-status-row">
+        Waiting for suspect reply...
       </div>
-      <!-- Show question if active -->
-      <div *ngIf="currentQuestionText">
-        <div class="question-number" style="font-size:1.1em;color:#6366f1;font-weight:600;margin-bottom:8px;">
-          Question {{ currentQuestionIndex }} of {{ totalQuestions }}
-        </div>
-        <div class="question-typewriter">
-          {{ currentQuestionText }}
-        </div>
-        <!-- Asking popup -->
-        <div *ngIf="status() === 'asking'" class="popup asking-popup">
-          <span>Asking...</span>
-        </div>
-        <!-- Idle popup -->
-        <div *ngIf="status() === 'idle-wait'" class="popup idle-popup">
-          <span>Waiting for suspect reply...</span>
-        </div>
-        <div *ngIf="status() === 'recording'" class="recording-indicator" style="color:#38bdf8;font-weight:600;margin-top:12px;">Recording...</div>
-       </div>
-      <div class="audio-status">
-        <span *ngIf="isRecording" class="recording-text">Recording...</span>
-        <span *ngIf="isProcessing" class="processing-text">Processing Answer...</span>
-        <div class="waveform-animation" *ngIf="isRecording"></div>
+      <div *ngIf="isRecording" class="tts-status-row">
+        Voice is being recognized...
+      </div>
+      <!-- Recording Status Bar inside question card -->
+      <div class="recording-status-bar">
+        <span class="status-icon">
+          <ng-container *ngIf="isRecording; else pausedIcon">🔴</ng-container>
+          <ng-template #pausedIcon>⏸️</ng-template>
+        </span>
+        <span>{{ isRecording ? 'Recording' : 'Paused' }}</span>
+        <span class="status-timer">— {{ isRecording ? elapsedTime : remainingTime }}</span>
       </div>
-    </div>
-    <div class="controls-row" *ngIf="currentQuestionText">
-      <button class="btn-pause" (click)="pauseRecording()"><i class="fas fa-pause"></i> Pause</button>
-      <button class="btn-skip" (click)="skipQuestion()"><i class="fas fa-forward"></i> Skip Question</button>
     </div>
   </section>
-
   <!-- Right Panel: Video + Transcript -->
   <section class="right-panel">
     <div class="video-preview">
       <ng-container *ngIf="!videoStream">
         <div class="camera-inactive-block">
-          <i class="fas fa-video camera-inactive-icon"></i>
+          <i class="fas fa-camera camera-placeholder-icon"></i>
           <div class="camera-inactive-title">Camera Inactive</div>
-          <div class="camera-inactive-sub">Click "Start Camera" to begin video recording</div>
+          <div class="camera-inactive-sub">Click "Start Investigation" to begin video recording</div>
         </div>
       </ng-container>
       <ng-container *ngIf="videoStream">
-        <video #videoElement autoplay muted playsinline class="camera-video camera-video-large"></video>
+        <video #videoElement autoplay muted playsinline class="camera-video"></video>
+        <div *ngIf="isRecording && currentQuestionIndex >= 0 && currentQuestionIndex < totalQuestions" class="recording-indicator">
+          <span style="font-size:1.3em;">🔴</span> Recording...
+        </div>
         <div class="video-status stylish-font">{{ videoStatus }}</div>
+        <div class="waveform-animation" *ngIf="isRecording">
+          <span></span><span></span><span></span><span></span><span></span>
+        </div>
       </ng-container>
     </div>
+    <div class="section-line"></div>
     <div class="transcript-panel">
       <div class="transcript-title">Transcription (Live):</div>
       <div class="transcript-scrollable">
         <div *ngFor="let line of transcriptLines" class="transcript-line">{{ line }}</div>
       </div>
     </div>
+    <button class="submit-evaluate-btn" (click)="navigateToValidationPage()">
+      Submit & Evaluate
+    </button>
   </section>
 </main>
-
-<!-- Completion Summary Modal -->
-<div class="summary-modal" *ngIf="showSummary">
-  <div class="summary-modal-content">
-    <h2>Interview Summary</h2>
-    <div *ngFor="let qa of summaryData" class="summary-qa-row">
-      <div class="summary-question">Q: {{ qa.question }}</div>
-      <div class="summary-answer">A: {{ qa.answer }}</div>
-      <div class="summary-duration">Audio: {{ qa.duration }}s</div>
-    </div>
-    <button class="btn-close-summary" (click)="closeSummary()">Close</button>
+<!-- Evidence Panel Sidebar (directly below button bar) -->
+<div class="evidence-sidebar" [class.open]="showEvidencePanel">
+  <div class="evidence-title-bar">
+    <span class="evidence-title">Evidence Panel</span>
+    <button class="evidence-close-btn" (click)="showEvidencePanel = false" title="Close">
+      <i class="fas fa-times"></i>
+    </button>
+  </div>
+  <div class="evidence-form-card">
+    <form class="evidence-upload-form" (submit)="$event.preventDefault(); uploadDocument()">
+      <div class="evidence-upload-row">
+        <label for="evidenceFileDoc" class="evidence-upload-label">
+          <i class="fas fa-file-upload evidence-field-icon"></i>
+          <span>Upload Document</span>
+        </label>
+        <input id="evidenceFileDoc" type="file" (change)="onEvidenceFileSelect($event, 'document')" />
+      </div>
+      <div class="evidence-upload-row">
+        <label for="evidenceFilePhoto" class="evidence-upload-label">
+          <i class="fas fa-image evidence-field-icon"></i>
+          <span>Upload Photo</span>
+        </label>
+        <input id="evidenceFilePhoto" type="file" accept="image/*" (change)="onEvidenceFileSelect($event, 'photo')" />
+      </div>
+      <div class="evidence-upload-row">
+        <label for="evidenceFileRec" class="evidence-upload-label">
+          <i class="fas fa-microphone evidence-field-icon"></i>
+          <span>Upload Recording</span>
+        </label>
+        <input id="evidenceFileRec" type="file" accept="audio/*,video/*" (change)="onEvidenceFileSelect($event, 'recording')" />
+      </div>
+      <hr class="evidence-divider" />
+      <div class="evidence-summary-row">
+        <label for="evidenceSummary" class="evidence-summary-label">Remark</label>
+        <textarea id="evidenceSummary" [(ngModel)]="evidenceSummary" rows="3" placeholder="Enter Remark..." class="evidence-summary-textarea"></textarea>
+      </div>
+      <button type="submit" class="evidence-submit-btn">Submit</button>
+    </form>
   </div>
 </div>
+<!-- Summary Sidebar -->
+<div class="summary-sidebar" [class.open]="showSummaryPanel">
+  <div class="summary-title-bar">
+    <span class="summary-title">Investigation Summary</span>
+    <button class="summary-close-btn" (click)="showSummaryPanel = false" title="Close">
+      <i class="fas fa-times"></i>
+    </button>
+  </div>
+  <div class="summary-content-card">
+    <div class="case-section-title">Case Details</div>
+    <div class="case-row"><span class="case-label">Case ID:</span> <span class="case-value">{{ caseId }}</span></div>
+    <div class="case-row"><span class="case-label">Crime Type:</span> <span class="case-value">{{ crimeType }}</span></div>
+    <div class="case-row"><span class="case-label">Date & Time:</span> <span class="case-value">{{ dateTime }}</span></div>
+    <div class="case-row"><span class="case-label">Location:</span> <span class="case-value">{{ location }}</span></div>
+    <div class="divider-line"></div>
+    <div class="case-section-title">Person Details</div>
+    <div class="case-row"><span class="case-label">Suspect Name:</span> <span class="case-value">{{ suspectName }}</span></div>
+    <div class="case-row"><span class="case-label">Investigation Officer:</span> <span class="case-value">{{ investigationOfficer }}</span></div>
+    <div class="divider-line"></div>
+    <div class="case-section-title">Progress Details</div>
+    <div class="case-row"><span class="case-label">Status:</span> <span class="case-value">{{ statusText }}</span></div>
+    <div class="case-row"><span class="case-label">Progress:</span> <span class="case-value">{{progress}}% (Stage: {{ progressStage }})</span></div>
+    <div class="case-row"><span class="case-label">Session Time:</span> <span class="case-value">{{ sessionTime }}</span></div>
+  </div>
+</div>
+
+<!-- Blur background when evidence or summary panel is open -->
+<div class="blur-bg" [class.hide]="!showEvidencePanel && !showSummaryPanel"></div>
 
 <footer>
   <p>© 2025 Pykara Technologies Pvt. Ltd. All rights reserved.</p>

src/app/py-detect/py-detect.component.ts

@@ -2,6 +2,7 @@ import { Component, OnDestroy, OnInit, signal, ViewChild, ElementRef, ChangeDete
 import { CommonModule } from '@angular/common';
 import { Router, NavigationStart } from '@angular/router';
 import { Subscription } from 'rxjs';
+import { FormsModule } from '@angular/forms';
 
 declare global {
   interface Window {
@@ -19,16 +20,19 @@ type QAResult = {
   audioUrl: string;
   startedAt: number;
   endedAt: number;
+  skipped?: boolean;
 };
 
 @Component({
   standalone: true,
   selector: 'app-py-detect',
-  imports: [CommonModule],
+  imports: [CommonModule, FormsModule],
   templateUrl: './py-detect.component.html',
   styleUrls: ['./py-detect.component.css']
 })
 export class PyDetectComponent implements OnInit, OnDestroy {
+  public showDetailsPanel: boolean = false;
+  public metadata: any = null;
 
   // ---- UI state ----
   status = signal<'idle' | 'asking' | 'idle-wait' | 'recording' | 'processing'>('idle');
@@ -86,7 +90,7 @@ export class PyDetectComponent implements OnInit, OnDestroy {
   private analyserWindowMs = 100;  // Declare analyserWindowMs property
 
   // Example question source (replace with API call when ready)
-  private seedQuestions = [
+  public seedQuestions = [
     'Please introduce yourself in two sentences.',
     'What motivates you to take on challenging tasks?',
     'Describe a situation where you solved a tough problem.',
@@ -109,35 +113,118 @@ export class PyDetectComponent implements OnInit, OnDestroy {
   public videoAnswers: Blob[] = [];
 
   // UI properties for template
+  caseId: string = '';
+  crimeType: string = '';
+  dateTime: string = '';
+  location: string = '';
+  suspectName: string = '';
+  statusText: string = '';
+  investigationOfficer: string = '';
   progress: number = 0;
-  caseId: string = 'CASE-007';
-  officer: string = 'Ganesh';
-  currentQuestionText: string = '';
+  progressStage: string = '';
+  sessionTime: string = '';
   isRecording: boolean = false;
   isProcessing: boolean = false;
   transcriptLines: string[] = [];
   showSummary: boolean = false;
   summaryData: { question: string; answer: string; duration: number }[] = [];
 
+  // Evidence panel state and placeholder data
+  public showEvidencePanel: boolean = false;
+  public showSummaryPanel: boolean = false;
+  public uploadedDocuments: string[] = ['Report.pdf', 'Statement.docx'];
+  public capturedPhotos: string[] = ['Photo1.jpg', 'Photo2.png'];
+  public previousRecordings: string[] = ['Recording1.webm', 'Recording2.mp3'];
+
+  // Info text for HUD below question
+  public floatingInfoText: string | null = null;
+  public infoText: string | null = null;
+
+  // Elapsed and remaining time for recording status
+  public elapsedTime: string = '00:00';
+  public remainingTime: string = '00:00';
+  private recordingTimerInterval: any;
+
+  // Repeat current question using TTS
+  public async repeatQuestion() {
+    await this.speakQuestion(this.currentQuestionText);
+    await this.sleep(1000);
+    this.infoText = 'Recording in progress – Listening to answer.';
+  }
+
   // Navigate back to the homepage
+
   navigateHome() {
     if (window.speechSynthesis) {
-      window.speechSynthesis.cancel(); // Stop any TTS audio immediately on navigation
+      window.speechSynthesis.cancel();
     }
-    this.router.navigate(['/']);  // Navigates to the root (homepage)
+    this.router.navigate(['/']);
   }
 
-  // Navigate to the info page
   goToInfoPage() {
     if (window.speechSynthesis) {
-      window.speechSynthesis.cancel(); // Stop any TTS audio immediately on navigation
+      window.speechSynthesis.cancel();
     }
     this.router.navigate(['/infopage']);
   }
 
+  navigateBackToCaseDetails() {
+    if (window.speechSynthesis) {
+      window.speechSynthesis.cancel();
+    }
+    // Stop any <audio> elements
+    const audioElems = document.querySelectorAll('audio');
+    audioElems.forEach((audioElem) => {
+      (audioElem as HTMLAudioElement).pause();
+      (audioElem as HTMLAudioElement).currentTime = 0;
+    });
+    // Stop custom Audio object if present
+    if ((window as any).pyDetectAudioObj && typeof (window as any).pyDetectAudioObj.pause === 'function') {
+      (window as any).pyDetectAudioObj.pause();
+      (window as any).pyDetectAudioObj.currentTime = 0;
+    }
+    // Stop any media streams
+    if (this.mediaStream) {
+      this.mediaStream.getTracks().forEach(t => t.stop());
+      this.mediaStream = undefined;
+    }
+    this.router.navigate(['/case-details']);
+  }
+
+
   // ======== Lifecycle ========
   ngOnInit(): void {
     this.isActive = true;
+    // Do NOT set isRecording = true here; only set when question starts
+
+    let metadata: any = null;
+    const nav = this.router.getCurrentNavigation();
+    if (nav?.extras?.state && nav.extras.state['metadata']) {
+      metadata = nav.extras.state['metadata'];
+      localStorage.setItem('pyDetectMetadata', JSON.stringify(metadata)); // Update localStorage on navigation
+      console.log('Received metadata from navigation:', metadata);
+    } else {
+      // Fallback: read from localStorage
+      const stored = localStorage.getItem('pyDetectMetadata');
+      if (stored) {
+        metadata = JSON.parse(stored);
+        console.log('Loaded metadata from localStorage:', metadata);
+      } else {
+        console.warn('No metadata found in navigation state or localStorage');
+      }
+    }
+    if (metadata) {
+      this.caseId = metadata.caseId || '';
+      this.crimeType = metadata.crimeType || '';
+      this.dateTime = metadata.dateTime || '';
+      this.location = metadata.location || '';
+      this.suspectName = metadata.suspectName || '';
+      this.statusText = metadata.status || '';
+      this.investigationOfficer = metadata.investigationOfficer || '';
+      this.progress = metadata.progress || 0;
+      this.progressStage = metadata.progressStage || '';
+      this.sessionTime = metadata.sessionTime || '';
+    }
   }
 
   ngOnDestroy(): void {
@@ -231,22 +318,6 @@ export class PyDetectComponent implements OnInit, OnDestroy {
     }
   }
 
-  public submitAll() {
-    this.stopAll();
-    this.stopVideoRecording();
-    this.videoStatus = 'Submitted!';
-    this.startDisabled.set(true);
-    this.stopDisabled.set(true);
-    this.resumeDisabled.set(true);
-    this.submitDisabled.set(true);
-    // TODO: Upload all videoAnswers to backend
-
-    // Example: Calculate dummy percentages (replace with real logic)
-    const truePercentage = 70;
-    const falsePercentage = 30;
-    this.router.navigate(['/validationpage'], { state: { truePercentage, falsePercentage } });
-  }
-
   private nextQuestionLoopRunning = false;
 
   private async nextQuestionLoop(): Promise<void> {
@@ -254,53 +325,47 @@ export class PyDetectComponent implements OnInit, OnDestroy {
       // 1) Get next question
       const q = await this.fetchNextQuestion();
       this.currentQuestion.set(q);
-      this.status.set('asking'); // Show asking popup
+      this.status.set('asking'); // Show listening HUD
       if (this.ttsEnabled()) {
         await this.speak(q);
       }
-      // After question finishes playing, show idle popup for 5 seconds
-      this.status.set('idle-wait'); // Show idle popup
-      await this.sleep(5000); // Wait for suspect reply
-      // Now start speech recognition only
-      this.status.set('recording');
-      let userSpoke = false;
+      // Start camera and audio recording
+      await this.startCamera();
+      this.status.set('recording'); // Show recording HUD
+      await this.startVideoRecording();
       this.transcriptSoFar = '';
       this.startRecognition('en-IN');
-      // Wait for user to start speaking
+      let silenceTimer: any;
+      let lastTranscript = '';
+      let silenceStart: number | null = null;
+      let answerDone = false;
+      // Wait for user to start speaking, then monitor for silence
       await new Promise<void>((resolve) => {
-        const checkSpeech = () => {
-          if (this.transcriptSoFar.trim().length > 0 && !userSpoke) {
-            userSpoke = true;
-            // Start video recording and analysis when user speaks
-            this.startVideoRecording();
-            resolve();
-          } else {
-            setTimeout(checkSpeech, 200);
+        const poll = () => {
+          const currentTranscript = this.transcriptSoFar.trim();
+          if (currentTranscript.length > 0) {
+            if (lastTranscript !== currentTranscript) {
+              lastTranscript = currentTranscript;
+              silenceStart = null;
+            } else {
+              if (!silenceStart) silenceStart = Date.now();
+              if (Date.now() - silenceStart > 10000) {
+                answerDone = true;
+                resolve();
+                return;
+              }
+            }
           }
+          setTimeout(poll, 500);
         };
-        checkSpeech();
+        poll();
       });
-      // Stop recognition and video recording after answer window
-      await this.sleep(this.maxAnswerMs);
+      // Stop recognition and video recording
       this.stopRecognition();
       this.stopVideoRecording();
-      const startedAt = Date.now();
-      const { audioUrl, avgPitchHz, avgVolume, transcript, language } =
-        await this.captureAnswerWithAnalysis(this.maxAnswerMs);
-      const endedAt = Date.now();
-      this.log.push({
-        question: q,
-        transcript,
-        language,
-        avgPitchHz,
-        avgVolume,
-        audioUrl,
-        startedAt,
-        endedAt
-      });
-      this.questionIndex.set(this.questionIndex() + 1);
       this.status.set('processing');
       await this.sleep(700);
+      this.questionIndex.set(this.questionIndex() + 1);
     }
     this.status.set('idle');
     this.stopVideoRecording();
@@ -545,7 +610,7 @@ export class PyDetectComponent implements OnInit, OnDestroy {
     };
   }
 
-  private removeFillerWords(text: string): string {
+    private removeFillerWords(text: string): string {
     const fillerWords = ['um', 'ah', 'like', 'you know', 'so', 'actually', 'basically'];
     const regex = new RegExp(`\\b(${fillerWords.join('|')})\\b`, 'gi');
     return text.replace(regex, '').replace(/\s+/g, ' ').trim();  // Clean extra spaces after removal
@@ -621,152 +686,243 @@ export class PyDetectComponent implements OnInit, OnDestroy {
     }
   }
 
+  public stopCamera() {
+    if (this.videoStream) {
+      this.videoStream.getTracks().forEach((track: any) => track.stop());
+    this.videoStream = undefined;
+    }
+    this.videoStatus = 'Camera stopped';
+  }
+
   // UI methods for template
   onStartInterview() {
-    this.currentQuestionText = this.seedQuestions[0];
+    this.currentQuestionIndex = 0;
     this.progress = 0;
     this.isRecording = false;
     this.isProcessing = false;
   }
-  pauseRecording() {
+  public submitAll() {
+    // Do NOT stop audio or video playback here
+    this.videoStatus = 'Submitted!';
+    this.startDisabled.set(true);
+    this.stopDisabled.set(true);
+    this.resumeDisabled.set(true);
+    this.submitDisabled.set(true);
+    // TODO: Upload all videoAnswers to backend
+
+    // Example: Calculate dummy percentages (replace with real logic)
+    const truePercentage = 70;
+    const falsePercentage = 30;
+    this.router.navigate(['/validationpage'], { state: { truePercentage, falsePercentage } });
+  }
+
+  // Start Investigation workflow
+public async onStartRecording() {
+  this.floatingInfoText = 'Starting camera and microphone...';
+  this.infoText = null;
+  await this.sleep(1200); // Wait for UI effect
+  await this.startCamera();
+  await this.startVideoRecording();
+  this.floatingInfoText = 'Camera and microphone ready.';
+  await this.sleep(800);
+  this.floatingInfoText = null;
+  this.currentQuestionIndex = 0; // Ensure first question is selected
+  this.askCurrentQuestion();     // Automatically ask the first question
+}
+
+  // Refactor askCurrentQuestion to allow time for user to answer after silence
+  public async askCurrentQuestion(): Promise<void> {
+    if (this.currentQuestionIndex >= this.seedQuestions.length) {
+      // All questions done
+      this.floatingInfoText = 'Investigation complete. Camera stopped.';
+      this.stopVideoRecording();
+      this.stopCamera();
+      setTimeout(() => {
+        this.floatingInfoText = null;
+        this.showSummary = true;
+      }, 2000);
+      return;
+    }
+
+    // Start camera and video recording for each question
+    await this.startCamera();
+    await this.startVideoRecording();
+
+    // Show "Recording..." only during active questions
+    this.isRecording = (this.currentQuestionIndex >= 0 && this.currentQuestionIndex < this.totalQuestions);
+    this.infoText = 'Recording in progress – Asking question.';
+
+    // Start audio recording in parallel
+    this.startRecognitionWithRecording(this.currentQuestionIndex);
+
+    await this.speakQuestion(this.currentQuestionText);
+    await this.sleep(1000);
+
+    this.infoText = 'Recording in progress – Listening to answer.';
+
+    await this.sleep(10000); // Give user time to answer
+
+    // Hide recording status bar and indicator before processing
+    this.isRecording = false;
+    // Stop audio and video recording after answer
+    this.stopRecognition();
+    this.stopVideoRecording();
+    this.infoText = 'Processing your question and answer...';
+    await this.sleep(5000); // Simulate backend save
+
+    // Hide recording status bar and indicator before showing saved text
     this.isRecording = false;
-    // Add logic to pause recording
+    this.infoText = 'Saved successfully.';
+    await this.sleep(1000);
+    this.infoText = null;
+
+    this.currentQuestionIndex++;
+    await this.askCurrentQuestion();
   }
-  skipQuestion() {
-    const idx = this.seedQuestions.indexOf(this.currentQuestionText);
-    if (idx >= 0 && idx < this.seedQuestions.length - 1) {
-      this.currentQuestionText = this.seedQuestions[idx + 1];
-      this.progress = Math.round(((idx + 2) / this.seedQuestions.length) * 100);
+
+  // Move to next question
+  public nextQuestion() {
+    this.currentQuestionIndex++;
+    if (this.currentQuestionIndex < this.seedQuestions.length) {
+      this.askCurrentQuestion();
     } else {
-      this.currentQuestionText = '';
-      this.progress = 100;
-      this.showSummary = true;
+      this.infoText = null;
+      this.floatingInfoText = 'Session complete.';
+      setTimeout(() => this.floatingInfoText = null, 2000);
     }
   }
-  closeSummary() {
-    this.showSummary = false;
+
+  // Add evidence summary and file handling
+  public evidenceSummary: string = '';
+  public evidenceFiles: { document?: File, photo?: File, recording?: File } = {};
+
+public onEvidenceFileSelect(event: any, type: 'document' | 'photo' | 'recording') {
+    const file = event.target.files && event.target.files[0];
+    if (file) {
+      this.evidenceFiles[type] = file;
+    }
   }
-  onStartRecording() {
-    this.progress = 0;
-    this.transcriptLines = [];
-    this.showSummary = false;
-    this.startQuestionFlow(0);
-    // Play the question using TTS, then wait 2s, then start recognition
-    this.speakQuestion(this.seedQuestions[0], () => {
-      setTimeout(() => {
-        this.startRecognitionWithRecording(0);
-      }, 2000);
+
+  public uploadDocument() {
+    if (this.evidenceFiles.document) {
+      this.uploadedDocuments.push(this.evidenceFiles.document.name + (this.evidenceSummary ? ' - ' + this.evidenceSummary : ''));
+      this.evidenceFiles.document = undefined;
+      this.evidenceSummary = '';
+    }
+    if (this.evidenceFiles.photo) {
+      this.capturedPhotos.push(this.evidenceFiles.photo.name);
+      this.evidenceFiles.photo = undefined;
+    }
+    if (this.evidenceFiles.recording) {
+      this.previousRecordings.push(this.evidenceFiles.recording.name);
+      this.evidenceFiles.recording = undefined;
+    }
+    this.showEvidencePanel = false; // Automatically close the panel after submit
+  }
+
+  // Add missing properties and methods for workflow
+  public currentQuestionIndex: number = -1;
+  public get totalQuestions(): number { return this.seedQuestions.length; }
+  public liveTranscription: string = '';
+  public get currentQuestionText(): string {
+    return this.currentQuestionIndex >= 0 ? this.seedQuestions[this.currentQuestionIndex] : '';
+  }
+
+  // TTS method
+  public async speakQuestion(text: string): Promise<void> {
+    return new Promise<void>((resolve) => {
+      const utterance = new SpeechSynthesisUtterance(text);
+      utterance.lang = 'en-IN';
+      utterance.pitch = 1;
+      utterance.rate = 1;
+      utterance.volume = 1;
+      utterance.onend = () => resolve();
+      window.speechSynthesis.cancel();
+      window.speechSynthesis.speak(utterance);
     });
   }
 
-  speakQuestion(text: string, onEnd?: () => void) {
-    const synth = window.speechSynthesis;
-    if (!synth) {
-      if (onEnd) onEnd();
+  // Speech recognition stub
+  public startRecognitionWithRecording(idx: number) {
+    const Ctor = (window as any).webkitSpeechRecognition || (window as any).SpeechRecognition;
+    if (!Ctor) {
+      alert('Speech Recognition not supported on this browser.');
       return;
     }
-    const utter = new SpeechSynthesisUtterance(text);
-    utter.lang = 'en-IN';
-    synth.cancel(); // Stop any previous speech
-    utter.onend = () => { if (onEnd) onEnd(); };
-    synth.speak(utter);
-  }
-
-  startRecognitionWithRecording(idx: number) {
-    const Ctor = window.webkitSpeechRecognition || window.SpeechRecognition;
-    if (!Ctor) return;
     this.recognition = new Ctor();
     this.recognition.lang = 'en-IN';
-    this.recognition.continuous = false;
-    this.recognition.interimResults = false;
-    let recordingStarted = false;
-    const startTime = Date.now();
-    // Timeout logic for 5 seconds if no answer
-    const silenceTimeout = setTimeout(() => {
-      if (!recordingStarted) {
-        this.recognition.stop();
-        // Do NOT set isRecording = false here
-        this.status.set('idle');
-        setTimeout(() => this.playNextQuestion(idx + 1), 5000);
-      }
-    }, 5000);
+    this.recognition.continuous = true;
+    this.recognition.interimResults = true;
+    let hasStartedSpeaking = false;
+    let silenceTimer: any = null;
     this.recognition.onresult = (event: any) => {
-      let finalText = '';
-      for (let i = event.resultIndex; i < event.results.length; i++) {
-        const result = event.results[i];
-        if (result.isFinal) {
-          finalText += result[0].transcript.trim();
-        }
-      }
-      if (!recordingStarted) {
-        recordingStarted = true;
-        clearTimeout(silenceTimeout); // Cancel timeout if answer detected
+      const transcript = Array.from(event.results)
+        .map((res: any) => res[0].transcript)
+        .join(' ')
+        .trim();
+      this.liveTranscription = transcript; // <-- This is critical!
+      if (transcript.length > 0 && !hasStartedSpeaking) {
+        hasStartedSpeaking = true;
+        this.isRecording = true;
       }
-      this.transcriptLines.push(finalText);
+      // Reset silence detection timer
+      clearTimeout(silenceTimer);
+      silenceTimer = setTimeout(() => {
+        if (hasStartedSpeaking) {
+          // Only stop recognition, do not set isRecording = false here
+          this.recognition.stop();
+        }
+      }, 2000); // Stop after 2 seconds of silence
     };
     this.recognition.onend = () => {
-      this.isRecording = false;
+      clearTimeout(silenceTimer);
+      // Do NOT set isRecording = false here
       this.status.set('processing');
-      setTimeout(() => this.playNextQuestion(idx + 1), 5000);
+      // Do NOT auto-advance to next question here. Wait for user to click Next Question.
     };
-    this.recognition.onerror = () => {
-      this.isRecording = false;
+    this.recognition.onerror = (err: any) => {
+      // Do NOT set isRecording = false here
       this.status.set('idle');
     };
     this.recognition.start();
   }
 
-  playNextQuestion(idx: number) {
-    if (idx >= this.seedQuestions.length) {
-      this.currentQuestionText = '';
-      this.progress = 100;
-      this.showSummary = true;
-      this.status.set('idle');
-      this.cdr.detectChanges();
-      this.isRecording = false;
-      return;
-    }
-    this.currentQuestionText = this.seedQuestions[idx];
-    this.cdr.detectChanges();
-    this.status.set('asking'); // Set status to asking
-    this.isRecording = false;  // Not recording yet
-    this.speakQuestion(this.seedQuestions[idx], () => {
-      // After TTS, wait 5 seconds, then start recording
-      setTimeout(() => {
-        this.status.set('recording');
-        this.isRecording = true;
-        this.startRecognitionWithRecording(idx);
-      }, 5000);
-    });
+  public closeSummary() {
+    this.showSummary = false;
   }
 
-  startQuestionFlow(idx: number) {
-    if (idx >= this.seedQuestions.length) {
-      this.currentQuestionText = '';
-      this.progress = 100;
-      this.showSummary = true;
-      this.status.set('idle');
-      return;
-    }
-    this.currentQuestionText = this.seedQuestions[idx];
-    this.status.set('asking');
-    setTimeout(() => {
-      this.status.set('recording');
-      this.isRecording = true;
-      this.isProcessing = false;
-      this.transcriptLines = [];
-      this.startRecognition('en-IN');
-    }, 1200); // 1.2s delay for "Asking..."
+  // Navigate to the validation page
+  navigateToValidationPage() {
+    this.router.navigate(['/validationpage']);
+  }
+
+  // Start timer when recording starts
+  public startRecordingTimer(durationSeconds: number) {
+    let elapsed = 0;
+    let remaining = durationSeconds;
+    this.elapsedTime = '00:00';
+    this.remainingTime = this.formatTime(durationSeconds);
+    clearInterval(this.recordingTimerInterval);
+    this.recordingTimerInterval = setInterval(() => {
+      if (this.isRecording) {
+        elapsed++;
+        remaining--;
+        this.elapsedTime = this.formatTime(elapsed);
+        this.remainingTime = this.formatTime(remaining);
+        if (remaining <= 0) {
+          clearInterval(this.recordingTimerInterval);
+        }
+      }
+    }, 1000);
   }
 
-  get currentQuestionIndex(): number {
-    return this.seedQuestions.indexOf(this.currentQuestionText) + 1;
-  }
-  get totalQuestions(): number {
-    return this.seedQuestions.length;
+  public stopRecordingTimer() {
+    clearInterval(this.recordingTimerInterval);
   }
-  startVoice() {
-    // Add logic to start voice recording or recognition here
-    this.status.set('recording');
+
+  private formatTime(seconds: number): string {
+    const m = Math.floor(seconds / 60).toString().padStart(2, '0');
+    const s = (seconds % 60).toString().padStart(2, '0');
+    return `${m}:${s}`;
   }
 }

src/app/summary-toggle-button/summary-toggle-button.component.css

@@ -0,0 +1,31 @@
+.summary-toggle-bar {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  margin-bottom: 18px;
+}
+.summary-toggle-btn {
+  font-family: 'Montserrat', 'Poppins', 'Arial Black', Arial, sans-serif;
+  font-size: 1.05rem;
+  font-weight: 700;
+  letter-spacing: 2px;
+  background: linear-gradient(90deg, #38bdf8 0%, #23272b 100%);
+  color: #e3f6ff;
+  box-shadow: 0 2px 16px #38bdf888;
+  border: none;
+  border-radius: 12px;
+  padding: 0.55rem 1.3rem;
+  margin: 0;
+  cursor: pointer;
+  transition: background 0.4s, box-shadow 0.4s, color 0.3s, transform 0.2s;
+  overflow: hidden;
+}
+.summary-toggle-btn:hover {
+  background: linear-gradient(90deg, #23272b 0%, #38bdf8 100%);
+  color: #bae6fd;
+  box-shadow: 0 2px 24px #bae6fd88;
+}
+.summary-icon {
+  font-size: 1.2em;
+  margin-right: 6px;
+}

src/app/validationpage/validationpage.component.css

@@ -1,21 +1,259 @@
+/* Modern UI header styles from infopage */
+.site-header {
+  background: #011329;
+  box-shadow: 0 2px 12px #38bdf844;
+  margin-bottom: 0;
+  position: relative;
+  z-index: 10;
+  padding-bottom: 0;
+}
+
+/* Validation Report Template Styles */
+.validation-template-main {
+  margin-top: 32px;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+.validation-template-flex {
+  display: flex;
+  flex-direction: row;
+  max-width: 1200px;
+  width: 100%;
+  gap: 32px;
+}
+.validation-template-left {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 32px;
+  min-width: 180px;
+}
+.validation-circle {
+  width: 140px;
+  height: 140px;
+  border-radius: 50%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 2px 16px #38bdf844;
+  margin-bottom: 8px;
+}
+.validation-circle.truth {
+  background: linear-gradient(135deg, #bae6fd 0%, #38bdf8 100%);
+}
+.validation-circle.inconsistency {
+  background: linear-gradient(135deg, #fee2e2 0%, #991b1b 100%);
+}
+.circle-value {
+  font-size: 2.4rem;
+  font-weight: 900;
+  color: #2563eb;
+  margin-bottom: 8px;
+}
+.validation-circle.inconsistency .circle-value {
+  color: #991b1b;
+}
+.circle-label {
+  font-size: 1rem;
+  color: #6366f1;
+  text-align: center;
+}
+.validation-template-right {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+.validation-section {
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: 0 2px 16px #2563eb22;
+  margin-bottom: 0;
+  padding-bottom: 0;
+}
+.section-header {
+  font-size: 1.15rem;
+  font-weight: 700;
+  padding: 12px 24px;
+  border-radius: 12px 12px 0 0;
+  letter-spacing: 1px;
+}
+.details-header {
+  background: #fbbf24;
+  color: #23272b;
+}
+.incident-header {
+  background: #ef4444;
+  color: #fff;
+}
+.followup-header {
+  background: #14b8a6;
+  color: #fff;
+}
+.section-table {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 0 24px 18px 24px;
+}
+.section-row {
+  display: flex;
+  border-bottom: 1px solid #e5e7eb;
+  padding: 8px 0;
+}
+.section-row:last-child {
+  border-bottom: none;
+}
+.section-cell {
+  flex: 1;
+  font-size: 1rem;
+  color: #23272b;
+  padding-right: 16px;
+  word-break: break-word;
+}
+.section-cell[colspan="3"] {
+  flex: 3;
+}
+@media (max-width: 900px) {
+  .validation-template-flex {
+    flex-direction: column;
+    align-items: center;
+  }
+  .validation-template-right {
+    width: 100%;
+  }
+}
+
+.header-inner {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 18px 32px 0 32px;
+  position: relative;
+}
+
+.logo-cluster {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+}
+
+.logo-img-header {
+  width: 54px;
+  height: 54px;
+  border-radius: 50%;
+  background: #fff;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
+  padding: 4px;
+  margin-top: -6px;
+  margin-bottom: 1vh;
+}
+
+.py-detect-title-header {
+  font-size: 2.1rem;
+  font-family: 'Segoe UI', 'Arial', 'Roboto', sans-serif;
+  font-weight: 900;
+  letter-spacing: 6px;
+  color: #38bdf8;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  margin-bottom: 1.5vh;
+}
+
+  .py-detect-title-header .py-letter.p {
+    color: #e3f6ff;
+    text-shadow: 0 0 6px #38bdf8;
+  }
+
+  .py-detect-title-header .py-letter.y {
+    color: #38bdf8;
+    text-shadow: 0 0 6px #38bdf8;
+  }
+
+  .py-detect-title-header .py-shape {
+    color: #e3f6ff;
+    background: #e3f6ff;
+    text-shadow: 0 0 6px #38bdf8;
+    box-shadow: 0 0 6px #38bdf8, 0 0 2px #fff;
+    border: 2px solid #23272b;
+    width: 18px;
+    height: 4px;
+    display: inline-block;
+    margin: 0 8px;
+    border-radius: 2px;
+  }
+
+  .py-detect-title-header .py-letter.d {
+    color: #e3f6ff;
+    text-shadow: 0 0 6px #38bdf8;
+  }
+
+  .py-detect-title-header .py-letter.e {
+    color: #38bdf8;
+    text-shadow: 0 0 6px #38bdf8;
+  }
+
+  .py-detect-title-header .py-letter.t {
+    color: #e3f6ff;
+    text-shadow: 0 0 6px #38bdf8;
+  }
+
+  .py-detect-title-header .py-letter.e2 {
+    color: #38bdf8;
+    text-shadow: 0 0 6px #38bdf8;
+  }
+
+  .py-detect-title-header .py-letter.c {
+    color: #e3f6ff;
+    text-shadow: 0 0 6px #38bdf8;
+  }
+
+  .py-detect-title-header .py-letter.t2 {
+    color: #38bdf8;
+    text-shadow: 0 0 6px #38bdf8;
+  }
+
+
+/* Footer */
+footer {
+  background: linear-gradient(to right, #011022, #01030a);
+  color: #fff;
+  text-align: center;
+  padding: 10px 0px;
+  position: static;
+  width: 100%;
+}
+
 /* Professional, modern look for validation results */
 .validation-result-container {
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
-  min-height: 100vh;
-  background: linear-gradient(120deg, #23272b 0%, #38bdf8 100%);
+  justify-content: flex-start;
+  background: #f6f8fa;
   position: relative;
+  padding-bottom: 64px; /* Ensure space for footer */
+  min-height: 0;
 }
 
 h2 {
-  font-size: 2.6rem;
-  font-weight: 900;
-  color: #e3f6ff;
-  margin-bottom: 32px;
+  font-size: 2.4rem;
+  font-weight: 800;
+  color: #2563eb;
+  margin-top: 40px;
+  margin-bottom: 28px;
   letter-spacing: 2px;
-  text-shadow: 0 2px 16px #1e293b88;
+  text-align: center;
+  background: linear-gradient(90deg, #2563eb 0%, #38bdf8 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  text-shadow: 0 2px 12px #38bdf844;
+  border-bottom: 2px solid #38bdf8;
+  padding-bottom: 12px;
 }
 
 .percentage-box {
@@ -106,3 +344,558 @@ h2 {
   0% { box-shadow: 0 2px 16px #38bdf888; transform: scale(1); }
   100% { box-shadow: 0 2px 32px #bae6fd88; transform: scale(1.07); }
 }
+
+/* Summary card for investigation evaluation */
+.summary-card {
+  margin-top: 32px;
+  background: rgba(56, 189, 248, 0.08);
+  border-radius: 14px;
+  border: 2px solid rgba(99, 102, 241, 0.15);
+  box-shadow: 0 0 24px rgba(99, 102, 241, 0.12);
+  padding: 24px 32px;
+  max-width: 420px;
+  text-align: left;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+.summary-title {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: #2563eb;
+  margin-bottom: 10px;
+  letter-spacing: 1px;
+}
+.summary-text {
+  font-size: 1.08rem;
+  color: #23272b;
+  font-weight: 500;
+  margin: 0;
+}
+
+/* Status chips/badges for result */
+.status-chip {
+  display: inline-block;
+  font-size: 0.85rem;
+  padding: 4px 10px;
+  border-radius: 8px;
+  font-weight: 600;
+}
+.status-chip.active { background: #dcfce7; color: #15803d; }
+.status-chip.archived { background: #fee2e2; color: #991b1b; }
+/* Modal styles for report summary */
+.modal-overlay {
+  position: fixed;
+  top: 0; left: 0; right: 0; bottom: 0;
+  background: rgba(30,41,59,0.65);
+  z-index: 2000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: fadeInUp 0.4s;
+}
+.modal-content {
+  background: #fff;
+  border-radius: 18px;
+  box-shadow: 0 8px 32px #38bdf844, 0 2px 16px #6366f144;
+  padding: 36px 44px 28px 44px;
+  min-width: 340px;
+  max-width: 480px;
+  color: #23272b;
+  position: relative;
+  outline: none;
+}
+.modal-title {
+  font-size: 2rem;
+  font-weight: 800;
+  color: #2563eb;
+  margin-bottom: 18px;
+  letter-spacing: 1px;
+}
+.modal-section {
+  margin-bottom: 18px;
+}
+.modal-close {
+  position: absolute;
+  top: 18px;
+  right: 24px;
+  background: none;
+  border: none;
+  font-size: 2rem;
+  color: #2563eb;
+  cursor: pointer;
+  z-index: 10;
+}
+.report-actions, .modal-section h3 {
+  margin-top: 18px;
+}
+.report-btn {
+  background: linear-gradient(90deg, #2563eb 0%, #38bdf8 100%);
+  color: #fff;
+  font-weight: 700;
+  border: none;
+  border-radius: 999px;
+  padding: 0.5rem 1.4rem;
+  margin-right: 12px;
+  margin-bottom: 8px;
+  cursor: pointer;
+  box-shadow: 0 2px 16px #38bdf888;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 1rem;
+  transition: background 0.2s, box-shadow 0.2s;
+}
+.report-btn:hover {
+  background: linear-gradient(90deg, #38bdf8 0%, #2563eb 100%);
+  color: #bae6fd;
+  box-shadow: 0 2px 24px #bae6fd88;
+}
+.icon-report::before {
+  content: "\1F4C4";
+  font-size: 1.2em;
+  margin-right: 4px;
+}
+.icon-download::before {
+  content: "\1F4BE";
+  font-size: 1.2em;
+  margin-right: 4px;
+}
+.icon-email::before {
+  content: "\2709";
+  font-size: 1.2em;
+  margin-right: 4px;
+}
+.modal-content h3 {
+  font-size: 1.1rem;
+  color: #2563eb;
+  font-weight: 700;
+  margin-bottom: 6px;
+}
+.modal-content p {
+  font-size: 1rem;
+  color: #23272b;
+  margin-bottom: 0;
+}
+
+/* Dashboard header styles */
+.dashboard-header {
+  background: linear-gradient(90deg, rgba(30,41,59,0.92) 0%, #38bdf8 100%);
+  padding: 32px 0 24px 0;
+  color: #fff;
+  box-shadow: 0 2px 16px #2563eb44;
+  position: relative;
+}
+.dashboard-header-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 32px;
+}
+.dashboard-logo {
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  background: #fff;
+  box-shadow: 0 2px 8px #38bdf844;
+  margin-right: 24px;
+}
+.dashboard-title-block {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+.dashboard-title {
+  font-size: 2.2rem;
+  font-weight: 900;
+  letter-spacing: 2px;
+  color: #fff;
+}
+.dashboard-date {
+  font-size: 1.1rem;
+  color: #bae6fd;
+  margin-top: 4px;
+}
+.header-btns-right {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+/* Main dashboard content */
+.dashboard-main {
+  background: #f6f8fa;
+  min-height: 100vh;
+  padding: 32px 0 0 0;
+}
+.dashboard-cards {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 32px;
+  max-width: 1200px;
+  margin: 0 auto;
+  justify-content: center;
+}
+.dashboard-card {
+  background: #fff;
+  border-radius: 18px;
+  box-shadow: 0 4px 24px #2563eb22;
+  padding: 32px 28px;
+  min-width: 280px;
+  max-width: 340px;
+  flex: 1 1 320px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.dashboard-card-title {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: #2563eb;
+  margin-bottom: 18px;
+  letter-spacing: 1px;
+}
+.dashboard-chart-card {
+  align-items: center;
+  justify-content: center;
+}
+.dashboard-chart-circle {
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #bae6fd 0%, #38bdf8 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 12px;
+  box-shadow: 0 2px 16px #38bdf844;
+}
+.dashboard-circle-value {
+  font-size: 2.2rem;
+  font-weight: 900;
+  color: #2563eb;
+  text-shadow: 0 2px 12px #38bdf844;
+}
+.dashboard-card-label {
+  font-size: 1rem;
+  color: #6366f1;
+  margin-top: 8px;
+}
+.dashboard-details-card {
+  align-items: flex-start;
+}
+.dashboard-details-list {
+  width: 100%;
+}
+.dashboard-details-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 14px;
+}
+.dashboard-details-label {
+  font-size: 1rem;
+  color: #23272b;
+  font-weight: 600;
+}
+.dashboard-details-value {
+  font-size: 1rem;
+  color: #2563eb;
+  font-weight: 700;
+}
+.dashboard-actions-card {
+  align-items: flex-start;
+}
+
+/* Session Overview Card */
+.session-overview-card {
+  background: #fbbf24;
+  border-radius: 12px;
+  box-shadow: 0 2px 12px #fbbf2444;
+  margin: 32px auto 18px auto;
+  max-width: 700px;
+  padding: 18px 32px 12px 32px;
+}
+.session-header {
+  font-size: 1.15rem;
+  font-weight: 700;
+  color: #23272b;
+  margin-bottom: 10px;
+}
+.session-fields {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 18px 32px;
+}
+.session-field {
+  min-width: 220px;
+  font-size: 1rem;
+  color: #23272b;
+}
+.field-label {
+  font-weight: 600;
+  color: #23272b;
+}
+.field-value {
+  font-weight: 500;
+  color: #2563eb;
+}
+
+/* AI Analysis Summary */
+.ai-summary-section {
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: 0 2px 16px #2563eb22;
+  margin: 0 auto 24px auto;
+  max-width: 900px;
+  padding: 24px 32px;
+}
+.ai-summary-header {
+  font-size: 1.2rem;
+  font-weight: 700;
+  color: #2563eb;
+  margin-bottom: 18px;
+}
+.ai-metrics-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 18px 32px;
+}
+.ai-metric {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  background: #f6f8fa;
+  border-radius: 10px;
+  padding: 16px 18px;
+  box-shadow: 0 2px 8px #2563eb11;
+}
+.metric-label {
+  font-size: 1rem;
+  font-weight: 600;
+  color: #23272b;
+  margin-bottom: 8px;
+}
+.metric-ring {
+  font-size: 2rem;
+  font-weight: 900;
+  border-radius: 50%;
+  padding: 18px 0;
+  width: 90px;
+  text-align: center;
+  margin-bottom: 6px;
+}
+.metric-blue {
+  background: linear-gradient(135deg, #bae6fd 0%, #38bdf8 100%);
+  color: #2563eb;
+  box-shadow: 0 2px 8px #38bdf844;
+}
+.metric-cyan {
+  background: linear-gradient(135deg, #a7f3d0 0%, #38bdf8 100%);
+  color: #0e7490;
+}
+.metric-red {
+  background: linear-gradient(135deg, #fee2e2 0%, #991b1b 100%);
+  color: #991b1b;
+}
+.metric-bar {
+  font-size: 1rem;
+  font-weight: 700;
+  color: #2563eb;
+  margin-bottom: 6px;
+}
+.metric-verdict-box {
+  background: #fef9c3;
+  color: #f59e42;
+  font-weight: 700;
+  border-radius: 8px;
+  padding: 8px 12px;
+  margin-top: 6px;
+  box-shadow: 0 2px 8px #fbbf2444;
+}
+
+/* AI Observations Section */
+.ai-observations-section {
+  background: #14b8a6;
+  border-radius: 12px;
+  box-shadow: 0 2px 16px #14b8a644;
+  margin: 0 auto 24px auto;
+  max-width: 900px;
+  padding: 24px 32px;
+  color: #fff;
+}
+.observations-header {
+  font-size: 1.15rem;
+  font-weight: 700;
+  margin-bottom: 12px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.ai-icon {
+  font-size: 1.3rem;
+}
+.observations-note {
+  background: #fff;
+  color: #134e4a;
+  border-radius: 8px;
+  padding: 14px 18px;
+  font-size: 1rem;
+  font-weight: 500;
+  box-shadow: 0 2px 8px #14b8a644;
+}
+
+/* Audio–Video Metrics Section */
+.audio-video-metrics-section {
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: 0 2px 16px #2563eb22;
+  margin: 0 auto 24px auto;
+  max-width: 900px;
+  padding: 24px 32px;
+}
+.metrics-header {
+  font-size: 1.15rem;
+  font-weight: 700;
+  color: #2563eb;
+  margin-bottom: 12px;
+}
+.metrics-graphs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 18px;
+}
+.graph-placeholder {
+  background: #f6f8fa;
+  border-radius: 8px;
+  color: #6366f1;
+  font-size: 1rem;
+  font-weight: 600;
+  padding: 18px 24px;
+  min-width: 220px;
+  flex: 1;
+  text-align: center;
+  box-shadow: 0 2px 8px #2563eb11;
+}
+
+/* Final Outcome Section */
+.final-outcome-section {
+  background: linear-gradient(90deg, #fbbf24 0%, #fef9c3 100%);
+  border-radius: 12px;
+  box-shadow: 0 2px 16px #fbbf2444;
+  margin: 0 auto 32px auto;
+  max-width: 900px;
+  padding: 24px 32px;
+}
+.outcome-header {
+  font-size: 1.15rem;
+  font-weight: 700;
+  color: #f59e42;
+  margin-bottom: 12px;
+}
+.outcome-fields {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 18px 32px;
+  margin-bottom: 18px;
+}
+.outcome-field {
+  min-width: 220px;
+  font-size: 1rem;
+  color: #23272b;
+}
+.outcome-field .field-label {
+  font-weight: 600;
+  color: #23272b;
+}
+.outcome-field .field-value {
+  font-weight: 500;
+  color: #2563eb;
+}
+.outcome-field .field-value.warning {
+  color: #991b1b;
+  font-weight: 700;
+}
+.outcome-actions {
+  display: flex;
+  gap: 18px;
+}
+.report-btn {
+  background: linear-gradient(90deg, #2563eb 0%, #38bdf8 100%);
+  color: #fff;
+  font-weight: 700;
+  border: none;
+  border-radius: 999px;
+  padding: 0.5rem 1.4rem;
+  margin-bottom: 8px;
+  cursor: pointer;
+  box-shadow: 0 2px 16px #38bdf888;
+  font-size: 1rem;
+  transition: background 0.2s, box-shadow 0.2s;
+}
+.report-btn:hover {
+  background: linear-gradient(90deg, #38bdf8 0%, #2563eb 100%);
+  color: #bae6fd;
+  box-shadow: 0 2px 24px #bae6fd88;
+}
+.investigation-outcome-card {
+  width: 100%;
+  max-width: 420px;
+  margin: 0 auto;
+  background: #fff;
+  border-radius: 18px;
+  box-shadow: 0 4px 24px #2563eb22;
+  padding: 32px 28px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.outcome-fields-grid {
+  display: grid;
+  grid-template-columns: 1fr 1.2fr;
+  gap: 18px 12px;
+  width: 100%;
+  margin-top: 8px;
+}
+.outcome-field-row {
+  display: contents;
+}
+.outcome-label {
+  font-size: 1rem;
+  color: #23272b;
+  font-weight: 600;
+  text-align: right;
+  padding-right: 12px;
+}
+.outcome-value {
+  font-size: 1rem;
+  color: #2563eb;
+  font-weight: 700;
+  text-align: left;
+}
+.status-chip.active {
+  background: #dcfce7;
+  color: #15803d;
+  border-radius: 8px;
+  padding: 4px 10px;
+  font-weight: 700;
+}
+.status-chip.archived {
+  background: #fee2e2;
+  color: #991b1b;
+  border-radius: 8px;
+  padding: 4px 10px;
+  font-weight: 700;
+}
+.summary-value {
+  grid-column: span 2;
+  background: #f6f8fa;
+  color: #991b1b;
+  border-radius: 8px;
+  padding: 8px 12px;
+  font-size: 0.98rem;
+  font-weight: 600;
+  margin-top: 6px;
+}

src/app/validationpage/validationpage.component.html

@@ -1,8 +1,203 @@
-<div class="validation-result-container">
-  <h2>Validation Results</h2>
-  <div class="percentage-box">
-    <p><strong>Pass Percentage:</strong> {{ truePercentage }}%</p>
-    <p><strong>Fail Percentage:</strong> {{ falsePercentage }}%</p>
+<!-- Back to Case Details button at the top -->
+<button class="back-btn" (click)="navigateBackToCaseDetails()">
+  <span class="back-icon">←</span> Back to Case Details
+</button>
+
+<!-- Modern UI header with logo and PyDetect title -->
+<div class="site-header">
+  <div class="header-inner">
+    <div class="logo-cluster">
+      <span (click)="navigateHome()" style="cursor:pointer;display:flex;align-items:center;">
+        <img src="/assets/pykara-logo.png" alt="PyDetect Logo" class="logo-img-header" />
+      </span>
+      <div class="py-detect-title-header">
+        <span class="py-letter p">P</span>
+        <span class="py-letter y">Y</span>
+        <span class="py-shape"></span>
+        <span class="py-letter d">D</span>
+        <span class="py-letter e">E</span>
+        <span class="py-letter t">T</span>
+        <span class="py-letter e2">E</span>
+        <span class="py-letter c">C</span>
+        <span class="py-letter t2">T</span>
+      </div>
+    </div>
   </div>
-  <button class="back-btn global-bottom-left-btn" (click)="goBack()">Back</button>
 </div>
+
+<!-- Dashboard-style header -->
+<div class="dashboard-header">
+  <div class="dashboard-header-content">
+
+    <div class="dashboard-title-block">
+      <div class="dashboard-title">Investigation Report</div>
+      <div class="dashboard-date">{{ reportDate || 'June 2024' }}</div>
+    </div>
+    <div class="header-btns-right">
+      <button class="back-btn" (click)="navigateBackToPyDetect()">
+        <span class="back-icon">←</span> Back to Investigation
+      </button>
+    </div>
+  </div>
+</div>
+
+<!-- Main dashboard content -->
+<div class="dashboard-main">
+  <div class="dashboard-cards">
+    <!-- Circular chart card -->
+    <div class="dashboard-card dashboard-chart-card">
+      <div class="dashboard-card-title">Truth Consistency</div>
+      <div class="dashboard-chart-circle">
+        <!-- Placeholder for chart, can use SVG or library later -->
+        <div class="dashboard-circle-value">{{ truePercentage }}%</div>
+      </div>
+      <div class="dashboard-card-label">Consistency Index</div>
+    </div>
+    <!-- Circular chart card -->
+    <div class="dashboard-card dashboard-chart-card">
+      <div class="dashboard-card-title">Inconsistency Index</div>
+      <div class="dashboard-chart-circle">
+        <!-- Placeholder for chart, can use SVG or library later -->
+        <div class="dashboard-circle-value">{{ truePercentage }}%</div>
+      </div>
+      <div class="dashboard-card-label">InConsistency Index</div>
+    </div>
+
+    <!-- Actions card -->
+    <div class="dashboard-card dashboard-actions-card">
+      <div class="dashboard-card-title">Actions</div>
+      <button class="report-btn" (click)="downloadPDF()">
+        <span class="icon-download"></span> Download PDF
+      </button>
+      <button class="report-btn" (click)="emailReport()">
+        <span class="icon-email"></span> Email Report
+      </button>
+      <button class="report-btn" (click)="reAnalyze()">Re-Analyze Audio/Video</button>
+    </div>
+    <!-- Details card -->
+    <div class="dashboard-card dashboard-details-card investigation-outcome-card">
+      <div class="dashboard-card-title">Investigation Outcome</div>
+      <div class="outcome-fields-grid">
+        <div class="outcome-field-row">
+          <span class="outcome-label">Status:</span>
+          <span class="outcome-value">
+            <span *ngIf="truePercentage >= 80" class="status-chip active">🟩 Consistent</span>
+            <span *ngIf="truePercentage < 80" class="status-chip archived">🟥 Inconsistent</span>
+          </span>
+        </div>
+        <div class="outcome-field-row">
+          <span class="outcome-label">Investigation Confidence Score:</span>
+          <span class="outcome-value">92%</span>
+        </div>
+        <div class="outcome-field-row">
+          <span class="outcome-label">Dominant Emotion Detected:</span>
+          <span class="outcome-value">Calm</span>
+        </div>
+        <div class="outcome-field-row">
+          <span class="outcome-label">Response Clarity:</span>
+          <span class="outcome-value">84% Clear</span>
+        </div>
+        <div class="outcome-field-row">
+          <span class="outcome-label">Speech Tone Analysis:</span>
+          <span class="outcome-value">Neutral: 60%, Tense: 40%</span>
+        </div>
+        <div class="outcome-field-row">
+          <span class="outcome-label">Summary:</span>
+          <span class="outcome-value summary-value">
+            The investigation did not meet validation criteria. Further review advised.
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Session Overview -->
+<div class="session-overview-card">
+  <div class="session-header">Session Overview</div>
+  <div class="session-fields">
+    <div class="session-field"><span class="field-label">Session ID:</span> <span class="field-value">INT-2025-007</span></div>
+    <div class="session-field"><span class="field-label">Suspect Name:</span> <span class="field-value">Ajay Kumar</span></div>
+    <div class="session-field"><span class="field-label">Investigation Officer:</span> <span class="field-value">Ganesh R.</span></div>
+    <div class="session-field"><span class="field-label">Session Duration:</span> <span class="field-value">00:42:18</span></div>
+    <div class="session-field"><span class="field-label">AI Model Version:</span> <span class="field-value">Py-Detect AI 2.0</span></div>
+    <div class="session-field"><span class="field-label">Date Analyzed:</span> <span class="field-value">2025-10-15</span></div>
+  </div>
+</div>
+
+<!-- AI Analysis Summary -->
+<div class="ai-summary-section">
+  <div class="ai-summary-header">AI Analysis Summary</div>
+  <div class="ai-metrics-grid">
+    <div class="ai-metric metric-consistency">
+      <div class="metric-label">Truth Consistency Index</div>
+      <div class="metric-ring metric-blue">72%</div>
+    </div>
+    <div class="ai-metric metric-inconsistency">
+      <div class="metric-label">Inconsistency Index</div>
+      <div class="metric-ring metric-red">28%</div>
+    </div>
+    <div class="ai-metric metric-emotion">
+      <div class="metric-label">Emotional State Distribution</div>
+      <div class="metric-bar">Calm – 60%, Nervous – 30%, Angry – 10%</div>
+    </div>
+    <div class="ai-metric metric-clarity">
+      <div class="metric-label">Response Clarity</div>
+      <div class="metric-ring metric-cyan">85% clear</div>
+    </div>
+    <div class="ai-metric metric-eyecontact">
+      <div class="metric-label">Eye-Contact Frequency</div>
+      <div class="metric-ring metric-blue">68% consistent</div>
+    </div>
+    <div class="ai-metric metric-confidence">
+      <div class="metric-label">Speech Confidence Level</div>
+      <div class="metric-ring metric-cyan">75%</div>
+    </div>
+    <div class="ai-metric metric-verdict">
+      <div class="metric-label">Overall AI Verdict</div>
+      <div class="metric-verdict-box">Partially Consistent / Needs Review</div>
+    </div>
+  </div>
+</div>
+
+<!-- AI Observations and Insights -->
+<div class="ai-observations-section">
+  <div class="observations-header"><span class="ai-icon">🤖</span> AI Observations & Insights</div>
+  <div class="observations-note">
+    <strong>Observation Summary:</strong><br>
+    During questioning, the suspect showed hesitation when discussing the time of the incident.<br>
+    Eye movement frequency decreased by 25% during key questions.<br>
+    Speech tone remained steady, indicating partial honesty.<br>
+    <strong>Recommendation:</strong> Further questioning advised for financial motive discussion.
+  </div>
+</div>
+
+<!-- Audio–Video Metrics (Graphs Placeholder) -->
+<div class="audio-video-metrics-section">
+  <div class="metrics-header">Audio–Video Metrics</div>
+  <div class="metrics-graphs">
+    <div class="graph-placeholder">Waveform & Emotion Timeline (Graph)</div>
+    <div class="graph-placeholder">Confidence vs Time (Graph)</div>
+    <div class="graph-placeholder">Facial Micro-Expression (Graph)</div>
+  </div>
+</div>
+
+<!-- Final Outcome Summary -->
+<div class="final-outcome-section">
+  <div class="outcome-header">Final Outcome Summary</div>
+  <div class="outcome-fields">
+    <div class="outcome-field"><span class="field-label">AI Verdict:</span> <span class="field-value warning">⚠️ Requires Further Verification</span></div>
+    <div class="outcome-field"><span class="field-label">Confidence Score:</span> <span class="field-value">82%</span></div>
+    <div class="outcome-field"><span class="field-label">Recommended Action:</span> <span class="field-value">Conduct follow-up questioning with corroborating evidence C-2025-A.</span></div>
+    <div class="outcome-field"><span class="field-label">Report Generated By:</span> <span class="field-value">Py-Detect AI System</span></div>
+  </div>
+  <div class="outcome-actions">
+    <button class="report-btn" (click)="downloadPDF()">Download Report (PDF)</button>
+    <button class="report-btn" (click)="emailReport()">Email Summary</button>
+    <button class="report-btn" (click)="reAnalyze()">Re-Analyze Audio/Video</button>
+  </div>
+</div>
+
+<footer>
+  <p>© 2025 Pykara Technologies Pvt. Ltd. All rights reserved.</p>
+</footer>

src/app/validationpage/validationpage.component.ts

@@ -1,5 +1,7 @@
 import { Component } from '@angular/core';
 import { Router } from '@angular/router';
+// For PDF generation
+// import jsPDF from 'jspdf';
 
 @Component({
   selector: 'app-validationpage',
@@ -9,6 +11,8 @@ import { Router } from '@angular/router';
 export class ValidationpageComponent {
   truePercentage: number = 0;
   falsePercentage: number = 0;
+  modalOpen: boolean = false;
+  reportDate: string = new Date().toLocaleString('default', { month: 'long', year: 'numeric' });
 
   constructor(private router: Router) {
     const nav = this.router.getCurrentNavigation();
@@ -17,7 +21,44 @@ export class ValidationpageComponent {
     this.falsePercentage = state?.falsePercentage ?? 0;
   }
 
-  goBack() {
+
+  navigateBackToCaseDetails() {
+    this.router.navigate(['/case-details']);
+  }
+
+  openModal() {
+    this.modalOpen = true;
+  }
+
+  closeModal() {
+    this.modalOpen = false;
+  }
+
+  downloadPDF() {
+    // Example: Use jsPDF to generate PDF
+    // const doc = new jsPDF();
+    // doc.text('Investigation Report', 10, 10);
+    // doc.text(`Pass Percentage: ${this.truePercentage}%`, 10, 30);
+    // doc.text(`Fail Percentage: ${this.falsePercentage}%`, 10, 40);
+    // doc.save('investigation-report.pdf');
+    alert('PDF download functionality to be implemented.');
+  }
+
+  emailReport() {
+    // Example: Use mailto or backend API
+    window.location.href = `mailto:?subject=Investigation Report&body=Pass Percentage: ${this.truePercentage}%\nFail Percentage: ${this.falsePercentage}%`;
+  }
+
+  navigateHome() {
+    this.router.navigate(['/']);
+  }
+
+  navigateBackToPyDetect() {
     this.router.navigate(['/py-detect']);
   }
+
+  reAnalyze() {
+    // TODO: Implement re-analysis logic
+    alert('Re-Analyze Audio/Video functionality to be implemented.');
+  }
 }