Upload 20 files

.env

@@ -0,0 +1 @@
+HUGGING_FACE_HUB_TOKEN=ADD_YOUR_KEY

.gitattributes

@@ -33,3 +33,13 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+images/dark.png filter=lfs diff=lfs merge=lfs -text
+images/hindi.png filter=lfs diff=lfs merge=lfs -text
+images/light.png filter=lfs diff=lfs merge=lfs -text
+images/llm-1.png filter=lfs diff=lfs merge=lfs -text
+images/norwegian.png filter=lfs diff=lfs merge=lfs -text
+images/notes.png filter=lfs diff=lfs merge=lfs -text
+images/urdu.png filter=lfs diff=lfs merge=lfs -text
+images/zoom.png filter=lfs diff=lfs merge=lfs -text
+notebooks/fine-tuning-blip.ipynb filter=lfs diff=lfs merge=lfs -text
+notebooks/swin-bart.ipynb filter=lfs diff=lfs merge=lfs -text

README.md

@@ -1,10 +1,103 @@
+# 🩺 Chest X-ray Report Generation via Vision-Language Models
+
+A modular monolithic web application that generates radiology-style reports from chest X-ray images using Vision-Language Models (VLMs) and supports multilingual, contextual question-answering via Large Language Models (LLMs).
+
+![Interface Screenshot (Dark Mode)](images/dark.png)
+![Interface Screenshot (Light Mode)](images/light.png)
+![Notes](images/notes.png)
+![Zoom Functionality](images/zoom.png)
+
+---
+
+## Overview
+
+This project combines computer vision and natural language understanding to assist medical students and practitioners in interpreting chest X-rays. Users can:
+
+- Upload chest X-ray images.
+- Automatically generate medical-style reports using Swin-T5.
+- Ask contextual questions about the report.
+- Receive multilingual explanations (e.g., Hindi, Urdu, Norwegian).
+- Take structured notes as a student or educator.
+
+---
+## Models and Data
+- VLMs used in this project are BLIP, Swin-BART, and Swin-T5
+- LLM used in this project is LLaMA3-8B Instruct (https://huggingface.co/meta-llama/Meta-Llama-3-8B-Instruct)
+- Dataset used is called "CheXpert Plus". The first chunk of size 155GB is used (https://stanfordaimi.azurewebsites.net/datasets/5158c524-d3ab-4e02-96e9-6ee9efc110a1)
+- The weights of the best performing model (Swin +T5) can be found here (https://studntnu-my.sharepoint.com/personal/aleksace_ntnu_no/_layouts/15/onedrive.aspx?id=/personal/aleksace_ntnu_no/Documents/InnovationProject/swin-t5-model.pth&parent=/personal/aleksace_ntnu_no/Documents/InnovationProject&ga=1)
+---
+
+## Features
+
+- 🔍 **Vision-Language Report Generation** (Swin-T5, Swin-BART, BLIP)
+- 💬 **Interactive Chatbot (LLaMA-3.1)** with multilingual responses
+- 🖼️ **Zoomable image preview**
+- 📝 **Note-taking section for medical education**
+- 🌗 **Dark/Light mode toggle**
+- 🧪 **ROUGE-1 metric evaluation**
+- 🔐 **No external API dependencies (except Hugging Face for model access)**
+
+---
+
+## Technology Stack
+
+| Layer         | Technology                         |
+|--------------|-------------------------------------|
+| Backend       | Python, Flask, PyTorch, Hugging Face Transformers |
+| Frontend      | HTML5, CSS3, JavaScript, Bootstrap |
+| Deep Learning | Swin-T5, LLaMA-3, BLIP, Torchvision |
+| Deployment    | Docker, NVIDIA CUDA, Git, GitHub   |
+| Development   | VS Code                            |
+
 ---
-title: Aiproject
-emoji: 🔥
-colorFrom: green
-colorTo: purple
-sdk: docker
-pinned: false
+
+## Application Architecture
+
+This is a **modular monolithic** application organized into the following components:
+
+- `app.py`: Main Flask entry point
+- `vlm_utils.py`: Vision-Language Model loading and inference
+- `chat_utils.py`: LLM-based contextual question answering
+- `preprocess.py`: Image transformations and metadata extraction
+- `templates/`: Jinja2 HTML files (frontend)
+- `static/`: CSS, JS, and assets
+
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+## Getting Started
+
+### Prerequisites
+
+- Python 3.9+
+- CUDA-enabled GPU (recommended)
+- Docker (optional for containerized setup)
+
+### Setup Instructions
+
+```bash
+# 1. Clone the repository
+git clone https://github.com/ammarlodhi255/Chest-xray-report-generation-app-using-VLM-and-LLM.git
+cd Chest-xray-report-generation-app-using-VLM-and-LLM
+
+# 2. Create virtual environment
+python -m venv venv
+source venv/bin/activate  # or venv\Scripts\activate on Windows
+
+# 3. Install dependencies
+pip install -r requirements.txt
+
+# 4. (Optional) Load HF Token for private LLaMA access
+export HF_TOKEN=your_token_here
+
+# 5. Running the App
+python app.py
+
+Then visit: http://127.0.0.1:5000
+```
+### LLM Interactions
+
+
+![Initialization](images/llm-1.png)
+![Hindi](images/hindi.png)
+![Urdu](images/urdu.png)
+![Norwegian](images/norwegian.png)

app.py

@@ -0,0 +1,403 @@
+import os
+import io
+import base64
+import torch
+import torch.nn as nn
+import torchvision.transforms as transforms
+from PIL import Image
+from flask import Flask, request, render_template, flash, redirect, url_for, jsonify
+from dotenv import load_dotenv # Import dotenv
+
+
+# Import necessary classes from your original script / transformers
+from transformers import (
+    SwinModel,
+    T5ForConditionalGeneration,
+    T5Tokenizer,
+    AutoModelForCausalLM, # Added for Llama
+    AutoTokenizer,       # Added for Llama
+)
+from transformers.modeling_outputs import BaseModelOutput
+
+load_dotenv() # Load environment variables from .env file
+
+# --- Configuration ---
+MODEL_PATH = '/cluster/home/ammaa/Downloads/Projects/CheXpert-Report-Generation/swin-t5-model.pth'  # Path to your trained model weights
+SWIN_MODEL_NAME = "microsoft/swin-base-patch4-window7-224"
+T5_MODEL_NAME = "t5-base"
+LLAMA_MODEL_NAME = "meta-llama/Meta-Llama-3.1-8B-Instruct" # Llama model
+HF_TOKEN = os.getenv("HUGGING_FACE_HUB_TOKEN") # Get token from env
+
+if not HF_TOKEN:
+    print("Warning: HUGGING_FACE_HUB_TOKEN environment variable not set. Llama model download might fail.")
+
+DEVICE = torch.device("cuda" if torch.cuda.is_available() else "cpu")
+UPLOAD_FOLDER = 'uploads' # Optional: If you want to save uploads temporarily
+ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg'}
+
+# Ensure the upload folder exists if you use it
+# if not os.path.exists(UPLOAD_FOLDER):
+#     os.makedirs(UPLOAD_FOLDER)
+
+# --- Swin-T5 Model Definition ---
+class ImageCaptioningModel(nn.Module):
+    def __init__(self,
+                 swin_model_name=SWIN_MODEL_NAME,
+                 t5_model_name=T5_MODEL_NAME):
+        super().__init__()
+        self.swin = SwinModel.from_pretrained(swin_model_name)
+        self.t5 = T5ForConditionalGeneration.from_pretrained(t5_model_name)
+        self.img_proj = nn.Linear(self.swin.config.hidden_size, self.t5.config.d_model)
+
+    def forward(self, images, labels=None):
+        swin_outputs = self.swin(images)
+        img_feats = swin_outputs.last_hidden_state
+        img_feats_proj = self.img_proj(img_feats)
+        encoder_outputs = BaseModelOutput(last_hidden_state=img_feats_proj)
+        if labels is not None:
+            outputs = self.t5(encoder_outputs=encoder_outputs, labels=labels)
+        else:
+            outputs = self.t5(encoder_outputs=encoder_outputs)
+        return outputs
+
+# --- Global Variables for Model Components ---
+swin_t5_model = None
+swin_t5_tokenizer = None
+transform = None
+llama_model = None
+llama_tokenizer = None
+
+def load_swin_t5_model_components():
+    """Loads the Swin-T5 model, tokenizer, and transformation pipeline."""
+    global swin_t5_model, swin_t5_tokenizer, transform
+    try:
+        print(f"Loading Swin-T5 model components on device: {DEVICE}")
+        # Initialize model structure
+        swin_t5_model = ImageCaptioningModel(swin_model_name=SWIN_MODEL_NAME, t5_model_name=T5_MODEL_NAME)
+
+        # Load state dictionary
+        if not os.path.exists(MODEL_PATH):
+             raise FileNotFoundError(f"Swin-T5 Model file not found at {MODEL_PATH}.")
+        # Load Swin-T5 model to the primary DEVICE (can be CPU or GPU)
+        swin_t5_model.load_state_dict(torch.load(MODEL_PATH, map_location=DEVICE))
+        swin_t5_model.to(DEVICE)
+        swin_t5_model.eval()  # Set to evaluation mode
+        print("Swin-T5 Model loaded successfully.")
+
+        # Load tokenizer
+        swin_t5_tokenizer = T5Tokenizer.from_pretrained(T5_MODEL_NAME)
+        print("Swin-T5 Tokenizer loaded successfully.")
+
+        # Define image transformations
+        transform = transforms.Compose([
+            transforms.Resize((224, 224)),
+            transforms.ToTensor(),
+            transforms.Normalize(mean=[0.485, 0.456, 0.406],
+                                 std=[0.229, 0.224, 0.225])
+        ])
+        print("Transforms defined.")
+
+    except Exception as e:
+        print(f"Error loading Swin-T5 model components: {e}")
+        raise
+
+def load_llama_model_components():
+    """Loads the Llama model and tokenizer."""
+    global llama_model, llama_tokenizer
+    if not HF_TOKEN:
+        print("Skipping Llama model load: Hugging Face token not found.")
+        return # Don't attempt to load if no token
+
+    try:
+        print(f"Loading Llama model ({LLAMA_MODEL_NAME}) components...")
+        # Use bfloat16 for memory efficiency if available, otherwise float16/32
+        torch_dtype = torch.bfloat16 if torch.cuda.is_available() and torch.cuda.is_bf16_supported() else torch.float16
+
+        llama_tokenizer = AutoTokenizer.from_pretrained(LLAMA_MODEL_NAME, token=HF_TOKEN)
+        llama_model = AutoModelForCausalLM.from_pretrained(
+            LLAMA_MODEL_NAME,
+            torch_dtype=torch_dtype,
+            device_map="auto", # Automatically distribute across GPUs/CPU RAM if needed
+            token=HF_TOKEN
+            # Add quantization config here if needed (e.g., load_in_4bit=True with bitsandbytes)
+            # quantization_config=BitsAndBytesConfig(...)
+        )
+        llama_model.eval() # Set to evaluation mode
+        print("Llama Model and Tokenizer loaded successfully.")
+
+    except Exception as e:
+        print(f"Error loading Llama model components: {e}")
+        # Decide if the app should run without the chat feature or crash
+        llama_model = None
+        llama_tokenizer = None
+        print("WARNING: Chatbot functionality will be disabled due to loading error.")
+        # raise # Uncomment this if the chat feature is critical
+
+# --- Inference Function (Swin-T5) ---
+def generate_report(image_bytes, selected_vlm, max_length=100):
+    """Generates a report/caption for the given image bytes using Swin-T5."""
+    global swin_t5_model, swin_t5_tokenizer, transform
+    if not all([swin_t5_model, swin_t5_tokenizer, transform]):
+        # Check if loading failed or wasn't called
+        if swin_t5_model is None or swin_t5_tokenizer is None or transform is None:
+             load_swin_t5_model_components() # Attempt to load again if missing
+             if not all([swin_t5_model, swin_t5_tokenizer, transform]):
+                 raise RuntimeError("Swin-T5 model components failed to load.")
+        else:
+             raise RuntimeError("Swin-T5 model components not loaded properly.")
+
+
+    if selected_vlm != "swin_t5_chexpert":
+        return "Error: Selected VLM is not supported."
+
+    try:
+        image = Image.open(io.BytesIO(image_bytes)).convert("RGB")
+        input_image = transform(image).unsqueeze(0).to(DEVICE) # Add batch dimension and send to device
+
+        # Perform inference
+        with torch.no_grad():
+            swin_outputs = swin_t5_model.swin(input_image)
+            img_feats = swin_outputs.last_hidden_state
+            img_feats_proj = swin_t5_model.img_proj(img_feats)
+            encoder_outputs = BaseModelOutput(last_hidden_state=img_feats_proj)
+
+            generated_ids = swin_t5_model.t5.generate(
+                encoder_outputs=encoder_outputs,
+                max_length=max_length,
+                num_beams=4,
+                early_stopping=True
+            )
+            report = swin_t5_tokenizer.decode(generated_ids[0], skip_special_tokens=True)
+            return report
+
+    except Exception as e:
+        print(f"Error during Swin-T5 report generation: {e}")
+        return f"Error generating report: {e}"
+
+# --- Chat Function (Llama 3.1) ---
+def generate_chat_response(question, report_context, max_new_tokens=250):
+    """Generates a chat response using Llama based on the report context."""
+    global llama_model, llama_tokenizer
+    if not llama_model or not llama_tokenizer:
+        return "Chatbot is currently unavailable."
+
+    # System prompt to guide the LLM
+    system_prompt = "You are a helpful medical assistant. I'm a medical student, your task is to help me understand the following report."
+    # Construct the prompt using the chat template
+    messages = [
+        {"role": "system", "content": system_prompt},
+        {"role": "user", "content": f"Based on the following report:\n\n---\n{report_context}\n---\n\nPlease answer this question: {question}"}
+    ]
+
+    # Prepare input for the model
+    try:
+        # Use the tokenizer's chat template
+        input_ids = llama_tokenizer.apply_chat_template(
+            messages,
+            add_generation_prompt=True,
+            return_tensors="pt"
+        ).to(llama_model.device) # Move input IDs to the same device as the model
+
+        # Set terminators for generation
+        # Common terminators for Llama 3 Instruct
+        terminators = [
+            llama_tokenizer.eos_token_id,
+            llama_tokenizer.convert_tokens_to_ids("<|eot_id|>")
+        ]
+
+        with torch.no_grad():
+            outputs = llama_model.generate(
+                input_ids,
+                max_new_tokens=max_new_tokens,
+                eos_token_id=terminators,
+                do_sample=True, # Use sampling for more natural responses
+                temperature=0.6,
+                top_p=0.9,
+                pad_token_id=llama_tokenizer.eos_token_id # Avoid warning, set pad_token_id
+            )
+
+        # Decode the response, skipping the input prompt part
+        response_ids = outputs[0][input_ids.shape[-1]:]
+        response_text = llama_tokenizer.decode(response_ids, skip_special_tokens=True)
+        return response_text.strip()
+
+    except Exception as e:
+        print(f"Error during Llama chat generation: {e}")
+        return f"Error generating chat response: {e}"
+
+
+# --- Flask Application Setup ---
+app = Flask(__name__)
+app.secret_key = os.urandom(24)
+
+# Load models when the application starts
+print("Loading models on application startup...")
+try:
+    load_swin_t5_model_components()
+    load_llama_model_components() # Load Llama
+    print("Model loading complete.")
+except Exception as e:
+    print(f"FATAL ERROR during model loading: {e}")
+    # Depending on requirements, you might want to exit or continue with limited functionality
+    # exit(1) # Example: Exit if models are critical
+
+def allowed_file(filename):
+    return '.' in filename and \
+           filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
+
+# ---- NEW: Function to Parse Filename ----
+def parse_patient_info(filename):
+    """
+    Parses a filename like '00069-34-Frontal-AP-63.0-Male-White.png'
+    Returns a dictionary with 'view', 'age', 'gender', 'ethnicity'.
+    Returns None if parsing fails.
+    """
+    try:
+        base_name = os.path.splitext(filename)[0]
+        parts = base_name.split('-')
+        # Expected structure based on example: ... - ViewPart1 - ViewPartN - Age - Gender - Ethnicity
+        if len(parts) < 5: # Need at least initial parts, age, gender, ethnicity
+            print(f"Warning: Filename '{filename}' has fewer parts than expected.")
+            return None
+
+        ethnicity = parts[-1]
+        gender = parts[-2]
+        age_str = parts[-3]
+        # Handle potential '.0' in age and convert to int
+        try:
+            age = int(float(age_str))
+        except ValueError:
+            print(f"Warning: Could not parse age '{age_str}' from filename '{filename}'.")
+            return None # Or set age to None/default
+
+        # Assume view is everything between the second part (index 1) and the age part (index -3)
+        view_parts = parts[2:-3]
+        view = '-'.join(view_parts) if view_parts else "Unknown" # Handle cases with missing view
+
+        # Basic validation
+        if gender.lower() not in ['male', 'female', 'other', 'unknown']: # Be flexible
+             print(f"Warning: Unusual gender '{gender}' found in filename '{filename}'.")
+             # Decide whether to return None or keep it
+
+        return {
+            'view': view,
+            'age': age,
+            'gender': gender.capitalize(), # Capitalize for display
+            'ethnicity': ethnicity.capitalize() # Capitalize for display
+        }
+    except IndexError:
+        print(f"Error parsing filename '{filename}': Index out of bounds.")
+        return None
+    except Exception as e:
+        print(f"Error parsing filename '{filename}': {e}")
+        return None
+
+# --- Routes ---
+
+@app.route('/', methods=['GET'])
+def index():
+    """Renders the main page."""
+    chatbot_available = bool(llama_model and llama_tokenizer)
+    return render_template('index.html', chatbot_available=chatbot_available)
+
+@app.route('/predict', methods=['POST'])
+def predict():
+    """Handles image upload and prediction."""
+    chatbot_available = bool(llama_model and llama_tokenizer) # Check again
+    patient_info = None # Initialize patient_info
+
+    if 'image' not in request.files:
+        flash('No image file part in the request.', 'danger')
+        return redirect(url_for('index'))
+
+    file = request.files['image']
+    vlm_choice = request.form.get('vlm_choice', 'swin_t5_chexpert')
+    try:
+        max_length = int(request.form.get('max_length', 100))
+        if not (10 <= max_length <= 512):
+            raise ValueError("Max length must be between 10 and 512.")
+    except ValueError as e:
+         flash(f'Invalid Max Length value: {e}', 'danger')
+         return redirect(url_for('index'))
+
+    if file.filename == '':
+        flash('No image selected for uploading.', 'warning')
+        return redirect(url_for('index'))
+
+    if file and allowed_file(file.filename):
+        try:
+            image_bytes = file.read()
+
+            # ---- ADDED: Parse filename ----
+            original_filename = file.filename
+            patient_info = parse_patient_info(original_filename)
+            if patient_info:
+                print(f"Parsed Patient Info: {patient_info}")
+            else:
+                print(f"Could not parse patient info from filename: {original_filename}")
+            # ---- END ADDED ----
+
+            # Generate report using Swin-T5
+            report = generate_report(image_bytes, vlm_choice, max_length)
+
+            # Check for errors in report generation
+            if report.startswith("Error"):
+                 flash(f'Report Generation Failed: {report}', 'danger')
+                 # Still render with image if possible, but show error
+                 image_data = base64.b64encode(image_bytes).decode('utf-8')
+                 return render_template('index.html',
+                                        report=None, # Or pass the error message
+                                        image_data=image_data,
+                                        patient_info=patient_info, # Pass parsed info even if report failed
+                                        chatbot_available=chatbot_available)
+
+
+            image_data = base64.b64encode(image_bytes).decode('utf-8')
+
+            # Render the page with results AND the report text for JS/Chat
+            return render_template('index.html',
+                                   report=report,
+                                   image_data=image_data,
+                                   patient_info=patient_info, # Pass the parsed info
+                                   chatbot_available=chatbot_available) # Pass availability again
+
+        except FileNotFoundError as fnf_error:
+             flash(f'Model file not found: {fnf_error}. Please check server configuration.', 'danger')
+             print(f"Model file error: {fnf_error}\n{traceback.format_exc()}")
+             return redirect(url_for('index'))
+        except RuntimeError as rt_error:
+            flash(f'Model loading error: {rt_error}. Please check server logs.', 'danger')
+            print(f"Runtime error during prediction (model loading?): {rt_error}\n{traceback.format_exc()}")
+            return redirect(url_for('index'))
+        except Exception as e:
+            flash(f'An unexpected error occurred during prediction: {e}', 'danger')
+            print(f"Error during prediction: {e}\n{traceback.format_exc()}")
+            return redirect(url_for('index'))
+    else:
+        flash('Invalid image file type. Allowed types: png, jpg, jpeg.', 'danger')
+        return redirect(url_for('index'))
+
+# --- New Chat Endpoint ---
+@app.route('/chat', methods=['POST'])
+def chat():
+    """Handles chat requests based on the generated report."""
+    if not llama_model or not llama_tokenizer:
+        return jsonify({"answer": "Chatbot is not available."}), 503 # Service unavailable
+
+    data = request.get_json()
+    if not data or 'question' not in data or 'report_context' not in data:
+        return jsonify({"error": "Missing question or report context"}), 400
+
+    question = data['question']
+    report_context = data['report_context']
+
+    try:
+        answer = generate_chat_response(question, report_context)
+        return jsonify({"answer": answer})
+    except Exception as e:
+        print(f"Error in /chat endpoint: {e}")
+        return jsonify({"error": "Failed to generate chat response"}), 500
+
+if __name__ == '__main__':
+    # Make sure to set debug=False for production/sharing
+    app.run(host='0.0.0.0', port=5000, debug=False)

kill_port.py

@@ -0,0 +1,21 @@
+import subprocess
+import os
+import signal
+
+def kill_port_linux(port):
+    try:
+        # Find processes using the port
+        result = subprocess.check_output(f'lsof -i :{port}', shell=True).decode()
+        lines = result.strip().split('\n')
+        for line in lines[1:]:  # skip header line
+            parts = line.split()
+            pid = int(parts[1])
+            os.kill(pid, signal.SIGKILL)
+            print(f'Killed PID {pid} using port {port}')
+    except subprocess.CalledProcessError:
+        print(f'No process is using port {port}.')
+    except Exception as e:
+        print(f'Error: {e}')
+
+if __name__ == '__main__':
+    kill_port_linux(5000)

notebooks/fine-tuning-blip.ipynb

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:781b947380c5d0728c8b98e291074d40133f843fbb08db706884ce37add153e9
+size 11496872

notebooks/swin-bart.ipynb

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b3a81106bb9a4bab05fae14934c820ca97edffbf53b41f82e105c614f43728af
+size 12369262

requirements.txt

@@ -0,0 +1,8 @@
+Flask>=2.0
+torch>=1.8
+torchvision>=0.9
+transformers>=4.10
+Pillow>=8.0
+sentencepiece>=0.1.90 # Often needed by T5Tokenizer
+tqdm # Was used in original script, optional for webapp but good practice if model loading is slow
+python-dotenv  # To handle the HF token

templates/index.html

@@ -0,0 +1,1466 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Chest X-ray Report Generation Application Via VLM and LLM</title>
+    <!-- Google Font: Roboto -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
+    <!-- Font Awesome for Icons -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
+    <style>
+        :root {
+            /* --- Light Mode Color Palette & Design Tokens --- */
+            --lm-primary-color: #0d6efd; /* Medical Blue */
+            --lm-primary-color-rgb: 13, 110, 253;
+            --lm-bg-primary: linear-gradient(135deg, #eef2f7 0%, #f0f5ff 100%);
+            --lm-bg-container: rgba(255, 255, 255, 0.85);
+            --lm-bg-content: #fdfdff; /* chat container, report box, form */
+            --lm-bg-input: #ffffff;
+            --lm-bg-user-msg: #dbeafe;
+            --lm-bg-bot-msg: #e9ecef;
+            --lm-bg-suggestion: #f0f2f5;
+            --lm-bg-suggestion-hover: #e2e6ea;
+            --lm-text-primary: #333;
+            --lm-text-secondary: #495057; /* dark-gray */
+            --lm-text-muted: #6c757d;
+            --lm-text-report: #212529;
+            --lm-border-primary: var(--lm-primary-color); /* Container border */
+            --lm-border-secondary: #dee2e6; /* medium-gray */
+            --lm-border-suggestion: #d5d9de;
+            --lm-border-suggestion-hover: #c8ced3;
+            --lm-shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.08);
+            --lm-shadow-hover: 0 6px 16px rgba(0, 0, 0, 0.12);
+            --lm-shadow-inset: inset 0 1px 4px rgba(0,0,0,0.04);
+            --lm-highlight-finding: #dc3545; /* Red */
+            --lm-highlight-device: var(--lm-primary-color); /* Blue */
+            --lm-scrollbar-thumb: var(--lm-primary-color);
+            --lm-scrollbar-track: #f0f0f0;
+
+            /* --- Dark Mode Color Palette & Design Tokens --- */
+            --dm-primary-color: #e53935; /* Vivid Red */
+            --dm-primary-color-rgb: 229, 57, 53;
+            --dm-bg-primary: #1a1a1a; /* Very Dark Gray/Near Black */
+            --dm-bg-container: rgba(33, 33, 33, 0.9); /* Darker container with slight transparency */
+            --dm-bg-content: #2d2d2d; /* Chat container, report box, form */
+            --dm-bg-input: #3a3a3a;
+            --dm-bg-user-msg: #5e2828; /* Dark red background for user */
+            --dm-bg-bot-msg: #3f3f3f; /* Dark gray for bot */
+            --dm-bg-suggestion: #4a4a4a;
+            --dm-bg-suggestion-hover: #5a5a5a;
+            --dm-text-primary: #f5f5f5; /* Off-white */
+            --dm-text-secondary: #bdbdbd; /* Lighter Gray */
+            --dm-text-muted: #9e9e9e;
+            --dm-text-report: #f5f5f5;
+            --dm-text-input-placeholder: #a0a0a0;
+            --dm-border-primary: var(--dm-primary-color); /* Container border */
+            --dm-border-secondary: #555555; /* Darker Gray Border */
+            --dm-border-suggestion: #666666;
+            --dm-border-suggestion-hover: #777777;
+            --dm-shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.4);
+            --dm-shadow-hover: 0 6px 16px rgba(0, 0, 0, 0.5);
+            --dm-shadow-inset: inset 0 1px 4px rgba(0,0,0,0.2);
+            --dm-highlight-finding: #ff7961; /* Lighter Red for contrast */
+            --dm-highlight-device: #6ec6ff; /* Lighter Blue for contrast */
+            --dm-scrollbar-thumb: var(--dm-primary-color);
+            --dm-scrollbar-track: #424242;
+
+            /* --- Universal Tokens --- */
+            --border-radius-sm: 6px;
+            --border-radius-md: 8px;
+            --border-radius-lg: 12px;
+            --transition-speed: 0.3s; /* Slightly faster transition */
+            --transition-easing: ease; /* Use standard ease */
+
+            /* --- Apply Light Mode by Default --- */
+            --primary-color: var(--lm-primary-color);
+            --primary-color-rgb: var(--lm-primary-color-rgb);
+            --bg-primary: var(--lm-bg-primary);
+            --bg-container: var(--lm-bg-container);
+            --bg-content: var(--lm-bg-content);
+            --bg-input: var(--lm-bg-input);
+            --bg-user-msg: var(--lm-bg-user-msg);
+            --bg-bot-msg: var(--lm-bg-bot-msg);
+            --bg-suggestion: var(--lm-bg-suggestion);
+            --bg-suggestion-hover: var(--lm-bg-suggestion-hover);
+            --text-primary: var(--lm-text-primary);
+            --text-secondary: var(--lm-text-secondary);
+            --text-muted: var(--lm-text-muted);
+            --text-report: var(--lm-text-report);
+            --text-input-placeholder: inherit; /* Use default */
+            --border-primary: var(--lm-border-primary);
+            --border-secondary: var(--lm-border-secondary);
+            --border-suggestion: var(--lm-border-suggestion);
+            --border-suggestion-hover: var(--lm-border-suggestion-hover);
+            --shadow-soft: var(--lm-shadow-soft);
+            --shadow-hover: var(--lm-shadow-hover);
+            --shadow-inset: var(--lm-shadow-inset);
+            --highlight-finding-color: var(--lm-highlight-finding);
+            --highlight-device-color: var(--lm-highlight-device);
+            --scrollbar-thumb: var(--lm-scrollbar-thumb);
+            --scrollbar-track: var(--lm-scrollbar-track);
+        }
+
+        /* --- Apply Dark Mode Variables --- */
+        body.dark-mode {
+            --primary-color: var(--dm-primary-color);
+            --primary-color-rgb: var(--dm-primary-color-rgb);
+            --bg-primary: var(--dm-bg-primary);
+            --bg-container: var(--dm-bg-container);
+            --bg-content: var(--dm-bg-content);
+            --bg-input: var(--dm-bg-input);
+            --bg-user-msg: var(--dm-bg-user-msg);
+            --bg-bot-msg: var(--dm-bg-bot-msg);
+            --bg-suggestion: var(--dm-bg-suggestion);
+            --bg-suggestion-hover: var(--dm-bg-suggestion-hover);
+            --text-primary: var(--dm-text-primary);
+            --text-secondary: var(--dm-text-secondary);
+            --text-muted: var(--dm-text-muted);
+            --text-report: var(--dm-text-report);
+            --text-input-placeholder: var(--dm-text-input-placeholder);
+            --border-primary: var(--dm-border-primary);
+            --border-secondary: var(--dm-border-secondary);
+            --border-suggestion: var(--dm-border-suggestion);
+            --border-suggestion-hover: var(--dm-border-suggestion-hover);
+            --shadow-soft: var(--dm-shadow-soft);
+            --shadow-hover: var(--dm-shadow-hover);
+            --shadow-inset: var(--dm-shadow-inset);
+            --highlight-finding-color: var(--dm-highlight-finding);
+            --highlight-device-color: var(--dm-highlight-device);
+            --scrollbar-thumb: var(--dm-scrollbar-thumb);
+            --scrollbar-track: var(--dm-scrollbar-track);
+        }
+
+        /* --- General Body & Container Styling --- */
+        body {
+            padding-top: 20px;
+            padding-bottom: 30px;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
+            overflow-x: hidden;
+            transition: background-color var(--transition-speed) var(--transition-easing), color var(--transition-speed) var(--transition-easing);
+        }
+
+        .container-fluid {
+            max-width: 1400px;
+            background-color: var(--bg-container);
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+            padding: 35px;
+            border-radius: var(--border-radius-lg);
+            box-shadow: var(--shadow-soft);
+            border: 3px solid var(--border-primary);
+            transition: background-color var(--transition-speed) var(--transition-easing), border-color var(--transition-speed) var(--transition-easing), box-shadow var(--transition-speed) var(--transition-easing);
+        }
+
+        /* Dark Mode Toggle Button Style */
+        #darkModeToggle {
+            border: 1px solid var(--border-secondary); /* Use secondary border */
+            color: var(--text-secondary);
+            background-color: transparent; /* Start transparent */
+            width: 40px;
+            height: 40px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 0;
+            border-radius: 50%;
+            transition: background-color var(--transition-speed) var(--transition-easing), color var(--transition-speed) var(--transition-easing), border-color var(--transition-speed) var(--transition-easing), transform 0.2s ease;
+        }
+        #darkModeToggle:hover {
+            background-color: rgba(var(--primary-color-rgb), 0.1);
+            border-color: var(--primary-color);
+            color: var(--primary-color);
+            transform: scale(1.05);
+        }
+         body.dark-mode #darkModeToggle {
+             border-color: var(--dm-border-secondary); /* Dark mode border */
+             color: var(--dm-text-secondary); /* Dark mode text */
+             background-color: #444; /* Slightly lighter dark */
+        }
+         body.dark-mode #darkModeToggle:hover {
+             background-color: #555;
+             border-color: var(--dm-primary-color);
+             color: var(--dm-primary-color);
+             transform: scale(1.05);
+        }
+
+        h1 {
+            color: var(--primary-color);
+            font-weight: 700;
+            margin-bottom: 0 !important; /* Removed margin as it's handled by the wrapper now */
+            font-size: 2.1rem;
+            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.05);
+            transition: color var(--transition-speed) var(--transition-easing);
+        }
+        body.dark-mode h1 {
+            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
+        }
+
+        h2 {
+            font-size: 1.5rem;
+            font-weight: 500;
+            color: var(--text-secondary);
+            margin-bottom: 20px;
+            padding-bottom: 10px;
+            border-bottom: 3px solid var(--primary-color);
+            display: inline-block;
+            transition: color var(--transition-speed) var(--transition-easing), border-color var(--transition-speed) var(--transition-easing);
+        }
+
+        /* --- Main Layout --- */
+        .main-row {
+            margin-top: 30px;
+        }
+
+        /* --- Chat Interface Section (Left Column) --- */
+        #chat-column {
+            border-right: 1px solid var(--border-secondary);
+            padding-right: 35px;
+            display: flex;
+            flex-direction: column;
+            height: calc(85vh - 110px);
+            min-height: 500px;
+            transition: opacity 0.5s ease, filter 0.5s ease, border-color var(--transition-speed) var(--transition-easing);
+        }
+        #chat-container {
+            flex-grow: 1;
+            display: flex;
+            flex-direction: column;
+            background-color: var(--bg-content);
+            border: 1px solid var(--border-secondary);
+            border-radius: var(--border-radius-md);
+            padding: 20px;
+            overflow: hidden;
+            box-shadow: var(--shadow-inset);
+             transition: background-color var(--transition-speed) var(--transition-easing), border-color var(--transition-speed) var(--transition-easing);
+        }
+        #chat-column.disabled {
+            opacity: 0.5;
+            filter: grayscale(50%);
+            pointer-events: none;
+        }
+        body.dark-mode #chat-column.disabled {
+             filter: grayscale(70%); /* Increase grayscale for dark */
+        }
+        #chat-column.disabled #chat-placeholder { display: block; }
+        #chat-placeholder {
+             display: none;
+             text-align: center; padding: 60px 15px;
+             color: var(--text-muted); font-style: italic; font-size: 0.9rem;
+             align-self: center; margin-top: auto; margin-bottom: auto;
+        }
+        #chat-messages {
+            flex-grow: 1; overflow-y: auto; margin-bottom: 15px; padding-right: 10px;
+            scrollbar-width: thin;
+            scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+        }
+        #chat-messages::-webkit-scrollbar { width: 6px; }
+        #chat-messages::-webkit-scrollbar-track { background: var(--scrollbar-track); border-radius: 3px;}
+        #chat-messages::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 3px; border: 1px solid var(--scrollbar-track);}
+
+        .chat-message {
+            margin-bottom: 15px; padding: 12px 18px;
+            border-radius: var(--border-radius-lg); max-width: 85%;
+            word-wrap: break-word; line-height: 1.55;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.06);
+            opacity: 0;
+            transform: translateY(10px);
+            animation: fadeSlideIn 0.4s ease forwards;
+            color: var(--text-primary); /* Default text color for messages */
+            transition: background-color var(--transition-speed) var(--transition-easing), color var(--transition-speed) var(--transition-easing);
+        }
+         @keyframes fadeSlideIn { to { opacity: 1; transform: translateY(0); } }
+
+        .user-message {
+            background-color: var(--bg-user-msg); margin-left: auto;
+            border-bottom-right-radius: var(--border-radius-sm); text-align: right;
+        }
+        .bot-message {
+            background-color: var(--bg-bot-msg); margin-right: auto;
+            border-bottom-left-radius: var(--border-radius-sm); text-align: left;
+        }
+        .bot-message.thinking {
+             font-style: italic; color: var(--text-muted); display: flex; align-items: center;
+        }
+        .bot-message.thinking::before {
+            content: ''; display: inline-block; width: 16px; height: 16px;
+            border: 2px solid var(--primary-color); border-top-color: transparent;
+            border-radius: 50%; animation: spin 1s linear infinite; margin-right: 8px;
+        }
+        @keyframes spin { to { transform: rotate(360deg); } }
+        body.dark-mode .chat-message { /* Ensure text is light in dark mode */
+            color: var(--dm-text-primary);
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+        }
+
+
+        #chat-form { display: flex; margin-top: auto; gap: 10px; }
+        #chat-input {
+            flex-grow: 1; border-radius: 25px; padding: 10px 18px;
+            border: 1px solid var(--border-secondary);
+            background-color: var(--bg-input);
+            color: var(--text-primary);
+            transition: box-shadow var(--transition-speed) var(--transition-easing), border-color var(--transition-speed) var(--transition-easing), background-color var(--transition-speed) var(--transition-easing), color var(--transition-speed) var(--transition-easing);
+        }
+        #chat-input:focus {
+             box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), 0.25);
+             border-color: var(--primary-color);
+        }
+        #chat-input::placeholder {
+             color: var(--text-input-placeholder);
+             opacity: 1;
+        }
+        body.dark-mode #chat-input {
+            box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
+        }
+        body.dark-mode #chat-input:focus {
+            background-color: #4f4f4f;
+        }
+
+        #send-button {
+            border-radius: 50%; width: 45px; height: 45px; padding: 0;
+            display: flex; align-items: center; justify-content: center; flex-shrink: 0;
+            transition: background-color var(--transition-speed) var(--transition-easing), transform var(--transition-speed) var(--transition-easing), border-color var(--transition-speed) var(--transition-easing), filter var(--transition-speed) var(--transition-easing);
+            background-color: var(--primary-color);
+            border-color: var(--primary-color);
+            color: white;
+        }
+        #send-button:hover {
+            transform: scale(1.1);
+            filter: brightness(115%); /* Use brightness for hover */
+             /* Ensure base color doesn't change on hover */
+            background-color: var(--primary-color);
+            border-color: var(--primary-color);
+        }
+        #send-button svg { width: 20px; height: 20px; fill: white; }
+
+
+        #example-questions {
+            margin-top: 12px;
+            padding-top: 10px;
+            border-top: 1px dashed var(--border-secondary);
+            text-align: left;
+            transition: border-color var(--transition-speed) var(--transition-easing);
+        }
+        #example-questions small {
+            display: block;
+            margin-bottom: 8px;
+            font-size: 0.8rem;
+            color: var(--text-secondary);
+            font-weight: 500;
+            transition: color var(--transition-speed) var(--transition-easing);
+        }
+        .suggestion-btn {
+            background-color: var(--bg-suggestion);
+            border: 1px solid var(--border-suggestion);
+            color: var(--primary-color);
+            font-size: 0.75rem;
+            padding: 4px 10px;
+            border-radius: 15px;
+            margin-right: 6px;
+            margin-bottom: 6px;
+            cursor: pointer;
+            transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, filter 0.2s ease;
+            text-decoration: none;
+            display: inline-block;
+        }
+        .suggestion-btn:hover {
+            background-color: var(--bg-suggestion-hover);
+            border-color: var(--border-suggestion-hover);
+            filter: brightness(110%);
+            /* Keep text color same unless specific dark mode override */
+            color: var(--primary-color);
+        }
+         body.dark-mode .suggestion-btn {
+             color: var(--dm-text-primary); /* Make text light */
+             background-color: var(--dm-bg-suggestion);
+             border-color: var(--dm-border-suggestion);
+         }
+         body.dark-mode .suggestion-btn:hover {
+             color: var(--dm-primary-color); /* Red hover text */
+             background-color: var(--dm-bg-suggestion-hover);
+             border-color: var(--dm-border-suggestion-hover);
+             filter: brightness(115%);
+         }
+
+
+        /* --- Content Section (Right Column) --- */
+        #content-column {
+            padding-left: 35px;
+            max-height: calc(85vh - 110px);
+            overflow-y: auto; scrollbar-width: thin;
+            scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+            position: relative;
+        }
+        #content-column::-webkit-scrollbar { width: 6px; }
+        #content-column::-webkit-scrollbar-track { background: var(--scrollbar-track); border-radius: 3px;}
+        #content-column::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 3px; border: 1px solid var(--scrollbar-track);}
+
+        /* --- Upload Form Styling & Animation --- */
+        #form-wrapper {
+            transition: opacity var(--transition-speed) var(--transition-easing),
+                        transform var(--transition-speed) var(--transition-easing),
+                        max-height 0.6s var(--transition-easing),
+                        margin-bottom var(--transition-speed) var(--transition-easing),
+                        padding-top var(--transition-speed) var(--transition-easing),
+                        padding-bottom var(--transition-speed) var(--transition-easing),
+                        border var(--transition-speed) var(--transition-easing);
+            overflow: hidden; max-height: 800px; transform: translateY(0);
+            opacity: 1; margin-bottom: 30px; padding-top: 0; padding-bottom: 0; border: none;
+        }
+        #upload-form {
+            padding: 30px;
+            border: 1px solid var(--border-secondary);
+            border-radius: var(--border-radius-md);
+            background-color: var(--bg-content); margin-bottom: 0;
+             transition: background-color var(--transition-speed) var(--transition-easing), border-color var(--transition-speed) var(--transition-easing);
+        }
+        .form-label {
+            font-weight: 500; margin-bottom: 0.6rem;
+            color: var(--text-secondary);
+            transition: color var(--transition-speed) var(--transition-easing);
+        }
+        .form-control, .form-select {
+             background-color: var(--bg-input);
+             color: var(--text-primary);
+             border: 1px solid var(--border-secondary);
+             transition: background-color var(--transition-speed) var(--transition-easing), color var(--transition-speed) var(--transition-easing), border-color var(--transition-speed) var(--transition-easing), box-shadow var(--transition-speed) var(--transition-easing);
+        }
+        .form-control::placeholder {
+             color: var(--text-input-placeholder);
+             opacity: 1;
+        }
+        .form-control:focus, .form-select:focus {
+             background-color: var(--bg-input);
+             color: var(--text-primary);
+             border-color: var(--primary-color);
+             box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), 0.25);
+        }
+        body.dark-mode .form-control, body.dark-mode .form-select {
+             box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
+        }
+         body.dark-mode .form-select {
+            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23f5f5f5' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
+         }
+         body.dark-mode .form-control:focus, body.dark-mode .form-select:focus {
+             background-color: #4f4f4f; /* Darker focus for inputs */
+         }
+
+        .form-control-sm, .form-select-sm {
+            padding: 0.45rem 0.9rem; font-size: 0.9rem;
+            border-radius: var(--border-radius-sm);
+        }
+        .form-text {
+             color: var(--text-muted);
+             transition: color var(--transition-speed) var(--transition-easing);
+        }
+
+        /* --- Primary Button Styling (Generate Report Button) --- */
+        .btn-primary {
+            background-color: var(--primary-color);
+            border-color: var(--primary-color);
+            padding: 12px 22px;
+            font-size: 1rem; font-weight: 500;
+            border-radius: var(--border-radius-sm);
+            color: #fff; /* Ensure text is white */
+            transition: background-color var(--transition-speed) var(--transition-easing),
+                        border-color var(--transition-speed) var(--transition-easing),
+                        box-shadow var(--transition-speed) var(--transition-easing),
+                        filter var(--transition-speed) var(--transition-easing),
+                        color var(--transition-speed) var(--transition-easing),
+                        opacity var(--transition-speed) var(--transition-easing);
+        }
+
+        /* Generic Hover/Focus/Active - Use Brightness */
+        .btn-primary:hover {
+            filter: brightness(115%);
+            /* Explicitly set colors to avoid inheriting Bootstrap's blue */
+            background-color: var(--primary-color);
+            border-color: var(--primary-color);
+            color: #fff;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+        }
+        .btn-primary:focus,
+        .btn-primary:active {
+            filter: brightness(110%);
+            background-color: var(--primary-color);
+            border-color: var(--primary-color);
+            color: #fff;
+            box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), 0.5), 0 4px 8px rgba(0, 0, 0, 0.1);
+        }
+        .btn-primary:disabled,
+        .btn-primary.disabled {
+            filter: none;
+            background-color: var(--primary-color);
+            border-color: var(--primary-color);
+            opacity: 0.65;
+        }
+
+        /* Specific Dark Mode Overrides for btn-primary */
+        body.dark-mode .btn-primary {
+             /* Base state already covered by variable swap, but can reiterate if needed */
+             background-color: var(--dm-primary-color);
+             border-color: var(--dm-primary-color);
+             color: #fff;
+        }
+        body.dark-mode .btn-primary:hover {
+             filter: brightness(120%); /* Slightly more brightness for dark */
+             background-color: var(--dm-primary-color); /* Keep red */
+             border-color: var(--dm-primary-color); /* Keep red */
+             color: #fff; /* Keep white */
+             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Darker shadow */
+        }
+        body.dark-mode .btn-primary:focus,
+        body.dark-mode .btn-primary:active {
+             filter: brightness(110%); /* Keep red */
+             background-color: var(--dm-primary-color); /* Keep red */
+             border-color: var(--dm-primary-color); /* Keep red */
+             color: #fff; /* Keep white */
+             /* Darker focus ring and shadow */
+             box-shadow: 0 0 0 0.2rem rgba(var(--dm-primary-color-rgb), 0.5), 0 4px 8px rgba(0, 0, 0, 0.3);
+        }
+        body.dark-mode .btn-primary:disabled,
+        body.dark-mode .btn-primary.disabled {
+             filter: none;
+             background-color: var(--dm-primary-color); /* Keep red */
+             border-color: var(--dm-primary-color); /* Keep red */
+             opacity: 0.5; /* Maybe slightly more transparent in dark mode */
+        }
+
+        .spinner-border { display: none; margin-right: 8px; width: 1.1rem; height: 1.1rem; color: currentColor; }
+        #upload-form.processing .spinner-border { display: inline-block; }
+        #upload-form.processing button[type="submit"] { cursor: not-allowed; opacity: 0.7; } /* Keep generic processing style */
+
+
+        /* --- State When Results are Loaded --- */
+        body.results-loaded #form-wrapper {
+            opacity: 0; transform: translateY(-20px) scale(0.95);
+            max-height: 0; padding-top: 0; padding-bottom: 0;
+            margin-top: 0; margin-bottom: 0; border-width: 0;
+            pointer-events: none;
+        }
+
+        /* --- Result Area Styling & Animation --- */
+         .result-area {
+             margin-top: 0;
+             opacity: 0;
+             transform: translateY(20px);
+             transition: opacity 0.6s ease-out 0.2s, transform 0.6s ease-out 0.2s;
+             text-align: center;
+         }
+         body.results-loaded .result-area {
+             opacity: 1;
+             transform: translateY(0);
+         }
+
+        /* --- Patient Info Section Styling --- */
+        #patient-info-section {
+            text-align: center;
+            margin-bottom: 25px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-secondary);
+             transition: border-color var(--transition-speed) var(--transition-easing);
+        }
+        #patient-info-section h3 {
+            font-size: 1.25rem;
+            font-weight: 500;
+            color: var(--text-secondary);
+            margin-bottom: 10px;
+            border-bottom: none;
+            display: inline-block;
+             transition: color var(--transition-speed) var(--transition-easing);
+        }
+        #patient-info-data {
+            font-size: 0.95rem;
+            color: var(--text-primary);
+             transition: color var(--transition-speed) var(--transition-easing);
+        }
+         #patient-info-data span {
+            margin: 0 8px;
+            color: var(--text-muted);
+             transition: color var(--transition-speed) var(--transition-easing);
+         }
+         #patient-info-data strong {
+             font-weight: 500;
+             color: var(--text-secondary);
+             transition: color var(--transition-speed) var(--transition-easing);
+         }
+
+         /* Adjust result columns */
+         .result-area .row .col-md-6 {
+             display: flex;
+             flex-direction: column;
+             align-items: center;
+             margin-bottom: 20px;
+         }
+          .result-area .row .col-md-6 h2 {
+             width: 100%;
+             text-align: center;
+         }
+         .img-preview-container, .report-box-container {
+              width: 100%;
+              max-width: 500px;
+              margin: 0 auto;
+         }
+
+
+        /* --- Image Preview & Zoom Styling --- */
+        #image-result-area { position: relative; width: 100%; }
+        .img-preview {
+            max-width: 100%; height: auto; border: 1px solid var(--border-secondary);
+            border-radius: var(--border-radius-md); box-shadow: var(--shadow-soft);
+            display: block;
+            margin: 0 auto;
+            transition: box-shadow var(--transition-speed) var(--transition-easing), border-color var(--transition-speed) var(--transition-easing);
+            cursor: crosshair;
+        }
+        .img-preview:hover { box-shadow: var(--shadow-hover); }
+
+        #zoom-preview-panel {
+            position: absolute; width: 250px; height: 250px;
+            background-color: var(--bg-content);
+            border: 2px solid var(--primary-color);
+            border-radius: var(--border-radius-md); box-shadow: var(--shadow-hover);
+            background-repeat: no-repeat; background-size: 0 0; background-position: 0 0;
+            opacity: 0; visibility: hidden;
+            transition: opacity 0.2s ease-out, visibility 0s linear 0.2s, background-color var(--transition-speed) var(--transition-easing), border-color var(--transition-speed) var(--transition-easing);
+            pointer-events: none; z-index: 100; overflow: hidden;
+            top: 0; left: calc(100% + 15px);
+        }
+        /* Adjust zoom panel side */
+         @media (max-width: 1200px) and (min-width: 992px) {
+             #zoom-preview-panel { left: auto; right: calc(100% + 15px); }
+         }
+
+        /* --- Zoom Slider Controls Styling --- */
+        #zoom-controls {
+            max-width: 300px;
+            margin-left: auto;
+            margin-right: auto;
+            opacity: 0;
+            transition: opacity 0.5s ease-in-out;
+            display: none;
+        }
+        body.results-loaded #zoom-controls {
+            display: block;
+            opacity: 1;
+        }
+        #zoom-controls .form-label-sm {
+            font-size: 0.8rem;
+            color: var(--text-secondary);
+            transition: color var(--transition-speed) var(--transition-easing);
+        }
+        #zoom-slider {
+            cursor: pointer;
+             /* Style the range input */
+             accent-color: var(--primary-color); /* Modern way to color thumb/track */
+             transition: accent-color var(--transition-speed) var(--transition-easing);
+        }
+        /* Fallback/more specific styling if needed */
+        body.dark-mode #zoom-slider::-webkit-slider-runnable-track { background-color: #555; }
+        body.dark-mode #zoom-slider::-moz-range-track { background-color: #555; }
+        /* Thumb is handled by accent-color */
+
+
+        /* Hide zoom panel & slider on medium/small screens */
+         @media (max-width: 991.98px) {
+             #zoom-preview-panel, #zoom-controls {
+                  display: none !important;
+             }
+             .img-preview { cursor: default; }
+         }
+
+        /* --- Report Box Styling --- */
+        .report-box {
+            border: 1px solid var(--border-secondary); padding: 25px;
+            background-color: var(--bg-content); border-radius: var(--border-radius-md);
+            min-height: 250px;
+            font-family: 'Roboto', 'Consolas', 'Courier New', monospace;
+            font-size: 0.95rem;
+            color: var(--text-report); white-space: pre-wrap; word-wrap: break-word;
+            box-shadow: var(--shadow-soft); line-height: 1.7;
+            text-align: left;
+            transition: background-color var(--transition-speed) var(--transition-easing), color var(--transition-speed) var(--transition-easing), border-color var(--transition-speed) var(--transition-easing), box-shadow var(--transition-speed) var(--transition-easing);
+        }
+
+        /* --- Medical Term Highlighting --- */
+        .medical-term-finding {
+            font-weight: 600;
+            color: var(--highlight-finding-color);
+            transition: color var(--transition-speed) var(--transition-easing);
+        }
+        .medical-term-device {
+            font-weight: 600;
+            color: var(--highlight-device-color);
+            transition: color var(--transition-speed) var(--transition-easing);
+        }
+
+        /* --- Medical Icon Styling --- */
+        .medical-icon {
+            margin-left: 6px;
+            color: var(--text-secondary);
+            font-size: 0.9em;
+            cursor: help;
+            vertical-align: middle;
+             transition: color var(--transition-speed) var(--transition-easing);
+        }
+        /* Bootstrap Tooltip Overrides */
+         .tooltip .tooltip-inner {
+            background-color: var(--text-secondary); /* Default tooltip bg */
+            color: var(--bg-content); /* Default tooltip text */
+            font-size: 0.8rem;
+            padding: 5px 10px;
+            border-radius: var(--border-radius-sm);
+            transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
+         }
+         .tooltip.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before,
+         .tooltip.bs-tooltip-top .tooltip-arrow::before {
+             border-top-color: var(--text-secondary);
+             transition: border-top-color var(--transition-speed) ease;
+         }
+         /* Add other arrow directions if needed */
+
+         body.dark-mode .tooltip .tooltip-inner {
+            background-color: #f0f0f0; /* Light background for dark mode tooltips */
+            color: #333; /* Dark text */
+         }
+         body.dark-mode .tooltip.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before,
+         body.dark-mode .tooltip.bs-tooltip-top .tooltip-arrow::before {
+             border-top-color: #f0f0f0;
+         }
+         /* Add other arrow directions for dark mode if needed */
+
+
+        /* --- Hidden element for report context --- */
+        #report-context-data { display: none; }
+
+        /* --- Reset Button --- */
+         #reset-button {
+              display: none;
+              margin-top: 30px;
+              margin-bottom: 0;
+              opacity: 0; transition: opacity var(--transition-speed) var(--transition-easing) 0.5s, color var(--transition-speed) var(--transition-easing), border-color var(--transition-speed) var(--transition-easing), background-color var(--transition-speed) var(--transition-easing);
+              padding: 10px 20px;
+              font-size: 0.95rem; border-radius: var(--border-radius-sm);
+              align-items: center; justify-content: center; gap: 8px;
+              color: #6c757d;
+              border: 1px solid #6c757d;
+              background-color: transparent;
+         }
+         #reset-button:hover {
+              color: #fff;
+              background-color: #5c636a; /* Slightly darker secondary */
+              border-color: #565e64;
+         }
+         body.dark-mode #reset-button {
+              color: var(--dm-text-secondary);
+              border-color: var(--dm-border-secondary); /* Use darker border */
+         }
+         body.dark-mode #reset-button:hover {
+              color: var(--dm-bg-primary);
+              background-color: var(--dm-text-secondary);
+              border-color: var(--dm-text-secondary);
+         }
+         body.results-loaded #reset-button {
+             display: inline-flex;
+             opacity: 1;
+         }
+         #reset-button svg { width: 1em; height: 1em; fill: currentColor; }
+
+        /* --- Student Notes Section Styling --- */
+        #student-notes-section {
+            margin-top: 40px;
+            padding-top: 25px;
+            border-top: 1px solid var(--border-secondary);
+            text-align: left;
+            opacity: 0;
+            display: none;
+            transition: opacity 0.6s ease-out 0.4s, border-color var(--transition-speed) var(--transition-easing);
+        }
+        body.results-loaded #student-notes-section {
+            display: block;
+            opacity: 1;
+        }
+        .notes-input-area {
+            background-color: var(--bg-content);
+            padding: 20px;
+            border-radius: var(--border-radius-md);
+            border: 1px solid var(--border-secondary);
+            box-shadow: var(--shadow-inset);
+            transition: background-color var(--transition-speed) var(--transition-easing), border-color var(--transition-speed) var(--transition-easing);
+        }
+        #student-notes-textarea,
+        #student-notes-keywords {
+            font-size: 0.9rem;
+            line-height: 1.6;
+            resize: vertical;
+            background-color: var(--bg-input);
+            color: var(--text-primary);
+            border: 1px solid var(--border-secondary);
+            transition: background-color var(--transition-speed) var(--transition-easing), color var(--transition-speed) var(--transition-easing), border-color var(--transition-speed) var(--transition-easing), box-shadow var(--transition-speed) var(--transition-easing);
+        }
+         #student-notes-textarea {
+            min-height: 150px;
+        }
+        #student-notes-textarea::placeholder,
+        #student-notes-keywords::placeholder {
+             color: var(--text-input-placeholder);
+             opacity: 1;
+        }
+        #student-notes-textarea:focus,
+        #student-notes-keywords:focus {
+            background-color: var(--bg-input);
+            color: var(--text-primary);
+            border-color: var(--primary-color);
+            box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), 0.25);
+        }
+        body.dark-mode #student-notes-textarea,
+        body.dark-mode #student-notes-keywords {
+             box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
+        }
+        body.dark-mode #student-notes-textarea:focus,
+        body.dark-mode #student-notes-keywords:focus {
+             background-color: #4f4f4f;
+        }
+
+
+        .notes-input-area label.form-label {
+            font-size: 0.95rem;
+            color: var(--text-secondary);
+            font-weight: 500;
+             transition: color var(--transition-speed) var(--transition-easing);
+        }
+        #copy-notes-button {
+            font-weight: 500;
+             color: var(--primary-color);
+             border: 1px solid var(--primary-color); /* Use 1px border for outline */
+             background-color: transparent;
+             transition: color var(--transition-speed) var(--transition-easing), border-color var(--transition-speed) var(--transition-easing), background-color var(--transition-speed) var(--transition-easing);
+        }
+        #copy-notes-button:hover {
+            color: #fff;
+            background-color: var(--primary-color);
+            border-color: var(--primary-color);
+        }
+         body.dark-mode #copy-notes-button {
+             /* Base color/border already handled by variable swap */
+         }
+        body.dark-mode #copy-notes-button:hover {
+             color: #fff; /* Ensure text stays white on red bg */
+             background-color: var(--dm-primary-color);
+             border-color: var(--dm-primary-color);
+        }
+         /* Style for the 'Copied' state */
+         #copy-notes-button:disabled {
+              opacity: 0.8; /* Make slightly transparent when copied */
+              cursor: default;
+              /* Use green tones for success feedback */
+              background-color: #d1e7dd;
+              border-color: #badbcc;
+              color: #0f5132;
+         }
+          body.dark-mode #copy-notes-button:disabled {
+              background-color: #143625; /* Dark green */
+              border-color: #1c4a32;
+              color: #75b798; /* Lighter green text */
+          }
+
+        #copy-feedback {
+             font-weight: 500;
+             font-size: 0.85rem;
+             opacity: 0;
+             transition: opacity 0.5s ease, color 0.5s ease;
+             color: #198754; /* Default success color */
+        }
+         body.dark-mode #copy-feedback.text-success {
+             color: #61e7a9; /* Lighter green for dark mode */
+         }
+         body.dark-mode #copy-feedback.text-danger {
+             color: #ff8a80; /* Lighter red for dark mode */
+         }
+
+        /* --- Alert Styling Adaptation --- */
+         .alert {
+             /* Rely on Bootstrap defaults mostly, override where needed */
+             transition: background-color var(--transition-speed) var(--transition-easing), color var(--transition-speed) var(--transition-easing), border-color var(--transition-speed) var(--transition-easing);
+         }
+         /* Example: Warning Alert */
+         body.dark-mode .alert-warning {
+             background-color: #4d3c11;
+             border-color: #664d03;
+             color: #ffecb5;
+         }
+         /* Example: Danger Alert */
+         body.dark-mode .alert-danger {
+             background-color: #4c161c;
+             border-color: #842029;
+             color: #fcc8cb;
+         }
+         /* Add other alert types (info, success) if used and need dark overrides */
+         body.dark-mode .btn-close {
+             filter: invert(1) grayscale(100%) brightness(200%);
+         }
+
+
+        /* --- Responsive adjustments --- */
+        @media (max-width: 991.98px) { /* Medium screens and below */
+            #chat-column {
+                border-right: none; border-bottom: 1px solid var(--border-secondary);
+                padding-right: 0; margin-bottom: 30px;
+                height: 60vh; min-height: 450px;
+            }
+            #content-column {
+                padding-left: 0; max-height: none; overflow-y: visible;
+            }
+            .container-fluid { padding: 25px; }
+            h1 { font-size: 1.9rem; }
+            h2 { font-size: 1.4rem; }
+             .result-area .row > div[class*="col-md-"] {
+                 width: 100%;
+                 margin-bottom: 25px;
+             }
+        }
+        @media (max-width: 767.98px) { /* Small screens */
+             #title-and-toggle { flex-direction: column; align-items: center; gap: 10px; } /* Stack title and toggle */
+             h1 { font-size: 1.7rem; text-align: center; } /* Center title */
+             h2 { font-size: 1.3rem; }
+             .container-fluid { padding: 20px; }
+             #chat-column { height: 55vh; min-height: 400px; }
+             .btn-primary, #reset-button { font-size: 0.9rem; padding: 10px 18px;}
+             #send-button { width: 40px; height: 40px; }
+             #send-button svg { width: 18px; height: 18px; }
+             #chat-input { padding: 8px 15px; }
+             .report-box { padding: 20px; font-size: 0.9rem; min-height: 200px;}
+             #student-notes-textarea { min-height: 120px; }
+        }
+
+    </style>
+</head>
+<!-- Add 'results-loaded' class server-side if results exist -->
+<body class="{{ 'results-loaded' if report or image_data else '' }}">
+    <div class="container-fluid">
+        <!-- MODIFIED: Wrap H1 and add Toggle Button -->
+        <div id="title-and-toggle" class="d-flex justify-content-between align-items-center mb-4">
+            <h1 class="flex-grow-1">Chest X-ray Report Generation</h1> 
+            <button id="darkModeToggle" class="btn btn-sm flex-shrink-0" aria-label="Toggle dark mode" title="Toggle dark mode">
+                <i class="fas fa-moon"></i> <!-- Moon icon initially -->
+            </button>
+        </div>
+
+        <!-- Flash Messages -->
+        <div id="flash-message-container">
+            {% with messages = get_flashed_messages(with_categories=true) %}
+              {% if messages %}
+                {% for category, message in messages %}
+                  <div class="alert alert-{{ category }} alert-dismissible fade show mb-3" role="alert">
+                    {{ message }}
+                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+                  </div>
+                {% endfor %}
+              {% endif %}
+            {% endwith %}
+        </div>
+
+        <!-- Main Row: Chat on Left, Content on Right -->
+        <div class="row main-row">
+
+            <!-- Chat Column (Left) -->
+            <div class="col-lg-5" id="chat-column" class="{{ 'disabled' if not report or not chatbot_available }}">
+                 <h2><i class="fas fa-comments me-2"></i>Chat about Report</h2>
+                 <small class="text-muted mb-2 d-block">Ask questions based *only* on the generated report.</small>
+
+                 {% if report and not chatbot_available %}
+                     <div class="alert alert-warning small p-2 mt-2">Chatbot (Llama 3.1) is not available or failed to load. Please check server logs.</div>
+                 {% endif %}
+
+                <div id="chat-container">
+                     <div id="chat-placeholder">Generate a report first to enable chat.</div>
+                    <div id="chat-messages">
+                        {% if report and chatbot_available %}
+                         <div class="chat-message bot-message" style="opacity: 1; transform: none;">Welcome! Ask me about the findings, impression, or specific details in the report above.</div>
+                         {% endif %}
+                    </div>
+                    <form id="chat-form" action="javascript:void(0);">
+                        <input type="text" id="chat-input" class="form-control" placeholder="Type your question..." autocomplete="off" {% if not report or not chatbot_available %}disabled{% endif %}>
+                        <button type="submit" id="send-button" class="btn btn-primary" {% if not report or not chatbot_available %}disabled{% endif %}>
+                             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M3.478 2.405a.75.75 0 00-.926.94l2.432 7.905H13.5a.75.75 0 010 1.5H4.984l-2.432 7.905a.75.75 0 00.926.94 60.519 60.519 0 0018.445-8.986.75.75 0 000-1.218A60.517 60.517 0 003.478 2.405z" /></svg>
+                        </button>
+                    </form>
+                    <div id="example-questions" {% if not report or not chatbot_available %}style="display: none;"{% endif %}>
+                        <small>Example Questions:</small>
+                        <button class="suggestion-btn">What are the main findings?</button>
+                        <button class="suggestion-btn">Are there any tubes or lines mentioned?</button>
+                        <button class="suggestion-btn">Summarize the impression.</button>
+                        <button class="suggestion-btn">Is the heart size normal?</button>
+                        <button class="suggestion-btn">Any signs of pleural effusion?</button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Content Column (Right - Form, Image, Report, Notes) -->
+            <div class="col-lg-7" id="content-column">
+
+                <!-- Form Section Wrapper (for animation) -->
+                <div id="form-wrapper">
+                    <h2><i class="fas fa-upload me-2"></i>Generate Report</h2>
+                    <form id="upload-form" method="post" enctype="multipart/form-data" action="{{ url_for('predict') }}">
+                        <div class="mb-3">
+                            <label for="imageUpload" class="form-label">1. Upload Chest X-Ray Image:</label>
+                            <input class="form-control form-control-sm" type="file" id="imageUpload" name="image" accept="image/png, image/jpeg, image/jpg" required>
+                            <div class="form-text">Allowed formats: PNG, JPG, JPEG. Filename format like '...-View-Age-Gender-Ethnicity.png' helps extract patient info.</div>
+                        </div>
+                        <div class="mb-3">
+                            <label for="vlmSelect" class="form-label">2. Choose Vision-Language Model:</label>
+                            <select class="form-select form-select-sm" id="vlmSelect" name="vlm_choice">
+                                <option value="swin_t5_chexpert" selected>Swin-T5 (CheXpert Trained)</option>
+                                <!-- Add other VLM options here if available -->
+                            </select>
+                        </div>
+                        <div class="mb-3">
+                            <label for="maxLength" class="form-label">3. Max Report Length (tokens):</label>
+                            <input type="number" class="form-control form-control-sm" id="maxLength" name="max_length" value="100" min="10" max="512">
+                            <div class="form-text">Adjusts the maximum length of the generated report (default: 100).</div>
+                        </div>
+                        <button type="submit" class="btn btn-primary w-100 mt-2">
+                             <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+                             <i class="fas fa-file-medical-alt me-1"></i> Generate Report
+                        </button>
+                    </form>
+                </div>
+                <!-- End Form Section -->
+
+                <!-- Result Section (Only render if data exists) -->
+                {% if report or image_data %}
+                <div class="result-area">
+                    <!-- Patient Info -->
+                    {% if patient_info %}
+                    <div id="patient-info-section">
+                       <h3><i class="fas fa-user-md me-2"></i>Patient Information</h3>
+                       <p id="patient-info-data">
+                           <strong>View:</strong> {{ patient_info.view | e }}
+                           <span>|</span>
+                           <strong>Age:</strong> {{ patient_info.age | e }}
+                           <span>|</span>
+                           <strong>Gender:</strong> {{ patient_info.gender | e }}
+                           <span>|</span>
+                           <strong>Ethnicity:</strong> {{ patient_info.ethnicity | e }}
+                       </p>
+                    </div>
+                    {% elif image_data %}
+                     <div id="patient-info-section">
+                        <p class="text-muted small"><em>Patient information could not be parsed from the filename.</em></p>
+                    </div>
+                    {% endif %}
+
+                    <!-- Image and Report Row -->
+                    <div class="row">
+                        <!-- Image Column -->
+                        {% if image_data %}
+                        <div class="col-md-6">
+                            <div class="img-preview-container" id="image-result-area">
+                                <h2><i class="fas fa-image me-2"></i>Uploaded Image</h2>
+                                <img id="uploaded-image" src="data:image/jpeg;base64,{{ image_data }}" alt="Uploaded Chest X-ray" class="img-preview">
+                                <div id="zoom-preview-panel"></div>
+                                <small class="d-block text-muted mt-2">Hover over image to zoom (on desktop).</small>
+                                <div id="zoom-controls" class="mt-3">
+                                    <label for="zoom-slider" class="form-label form-label-sm mb-1 d-block text-center">Zoom Level: <span id="zoom-value">2.0</span>x</label>
+                                    <input type="range" class="form-range" id="zoom-slider" min="1" max="5" step="0.1" value="2">
+                                </div>
+                            </div>
+                        </div>
+                        {% endif %}
+
+                        <!-- Report Column -->
+                        {% if report %}
+                        <div class="col-md-6">
+                            <div class="report-box-container">
+                                <h2><i class="fas fa-file-alt me-2"></i>Generated Report</h2>
+                                <div class="report-box">
+                                    <!-- Highlight medical terms dynamically -->
+                                    {{ report | safe if report.count('<') > 0 else report | e }}
+                                </div>
+                                <div id="report-context-data" data-report="{{ report|e }}"></div>
+                            </div>
+                        </div>
+                        {% elif image_data %}
+                         <div class="col-md-6">
+                             <div class="report-box-container">
+                                <h2><i class="fas fa-file-alt me-2"></i>Generated Report</h2>
+                                 <div class="alert alert-danger">Report generation failed. Please check the logs or try again.</div>
+                             </div>
+                         </div>
+                        {% endif %}
+                    </div> <!-- End Result Row -->
+
+                     <!-- Reset Button -->
+                     <button id="reset-button" class="btn btn-outline-secondary">
+                         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 16 16" aria-hidden="true">
+                           <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/>
+                           <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/>
+                         </svg>
+                         <span>Start Over / New Image</span>
+                     </button>
+
+                </div> <!-- End Result Area -->
+                {% endif %}
+                <!-- End Result Section -->
+
+                <!-- Student Notes Section -->
+                {% if report or image_data %} {# Only show notes if results exist #}
+                <div id="student-notes-section">
+                    <h3><i class="fas fa-user-graduate me-2"></i>Notes for Medical Student</h3>
+                    <div class="notes-input-area p-3 border rounded shadow-sm">
+                        <div class="mb-3">
+                            <label for="student-notes-textarea" class="form-label fw-bold">Observations & Learning Points:</label>
+                            <textarea class="form-control form-control-sm" id="student-notes-textarea" rows="8" placeholder="Enter key observations, differential diagnoses, relevant anatomy, clinical correlations, or questions for the student..."></textarea>
+                        </div>
+                        <div class="mb-3">
+                            <label for="student-notes-keywords" class="form-label fw-bold">Keywords/Tags:</label>
+                            <input type="text" class="form-control form-control-sm" id="student-notes-keywords" placeholder="e.g., Pneumonia, Cardiomegaly, Atelectasis, PICC Line Placement">
+                        </div>
+                        <button id="copy-notes-button" class="btn btn-sm btn-outline-primary w-100">
+                            <i class="fas fa-copy me-1"></i> Copy Notes & Keywords to Clipboard
+                        </button>
+                         <small id="copy-feedback" class="d-block text-center text-success mt-2">Copied!</small>
+                    </div>
+                </div>
+                {% endif %}
+                <!-- End Student Notes Section -->
+
+            </div> <!-- End Content Column -->
+        </div> <!-- End Main Row -->
+    </div> <!-- End Container -->
+
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+
+            // --- Initialize Bootstrap Tooltips ---
+            var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
+            var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
+              // Add container: 'body' to prevent tooltip being clipped in tight spaces
+              return new bootstrap.Tooltip(tooltipTriggerEl, { container: 'body', boundary: document.body });
+            });
+
+            // --- Dark Mode Toggle Functionality ---
+            const darkModeToggle = document.getElementById('darkModeToggle');
+            const bodyElement = document.body;
+            const toggleIcon = darkModeToggle?.querySelector('i');
+
+            const applyTheme = (theme) => {
+                if (!toggleIcon) return;
+                const isDark = theme === 'dark';
+
+                bodyElement.classList.toggle('dark-mode', isDark);
+                toggleIcon.classList.toggle('fa-moon', !isDark);
+                toggleIcon.classList.toggle('fa-sun', isDark);
+                localStorage.setItem('theme', theme);
+                const label = isDark ? 'Switch to light mode' : 'Switch to dark mode';
+                darkModeToggle.setAttribute('aria-label', label);
+                darkModeToggle.setAttribute('title', label); // Update tooltip title attribute
+
+                // Refresh the specific tooltip instance for the toggle button
+                const toggleTooltipInstance = bootstrap.Tooltip.getInstance(darkModeToggle);
+                if (toggleTooltipInstance) {
+                    toggleTooltipInstance.setContent({ '.tooltip-inner': label });
+                }
+            };
+
+            if (darkModeToggle && toggleIcon) {
+                const preferredTheme = localStorage.getItem('theme') ||
+                                      (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+                applyTheme(preferredTheme);
+
+                darkModeToggle.addEventListener('click', () => {
+                    const newTheme = bodyElement.classList.contains('dark-mode') ? 'light' : 'dark';
+                    applyTheme(newTheme);
+                });
+
+                window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
+                    if (!localStorage.getItem('theme')) { // Only follow system if no manual choice
+                         applyTheme(event.matches ? 'dark' : 'light');
+                    }
+                });
+            }
+            // --- End Dark Mode Toggle ---
+
+
+            // --- Form Processing Indicator & Animation Control ---
+            const form = document.getElementById('upload-form');
+            const formWrapper = document.getElementById('form-wrapper');
+            const submitButton = form?.querySelector('button[type="submit"]');
+            const spinner = submitButton?.querySelector('.spinner-border');
+
+            if (form && submitButton && formWrapper) {
+                 form.addEventListener('submit', function(e) {
+                     const fileInput = document.getElementById('imageUpload');
+                     if (!fileInput || fileInput.files.length === 0) { return; }
+                     form.classList.add('processing');
+                     submitButton.disabled = true;
+                     if (spinner) spinner.style.display = 'inline-block';
+                     submitButton.querySelector('i')?.classList.add('d-none');
+                 });
+            }
+
+             window.addEventListener('pageshow', function(event) {
+                 if (event.persisted || (window.performance && window.performance.getEntriesByType("navigation")[0].type === 'back_forward')) { // More robust check
+                    if (form && submitButton && spinner) {
+                        form.classList.remove('processing');
+                        submitButton.disabled = false;
+                        spinner.style.display = 'none';
+                        submitButton.querySelector('i')?.classList.remove('d-none');
+                    }
+                    const reportContextData = document.getElementById('report-context-data');
+                    bodyElement.classList.toggle('results-loaded', !!(reportContextData && reportContextData.dataset.report));
+                 }
+            });
+
+            // --- Chat Functionality ---
+            const chatForm = document.getElementById('chat-form');
+            const chatInput = document.getElementById('chat-input');
+            const chatMessages = document.getElementById('chat-messages');
+            const sendButton = document.getElementById('send-button');
+            const reportContextData = document.getElementById('report-context-data');
+            const chatColumn = document.getElementById('chat-column');
+            const chatPlaceholder = document.getElementById('chat-placeholder');
+            const exampleQuestionsContainer = document.getElementById('example-questions');
+            const reportContext = reportContextData ? reportContextData.dataset.report : null;
+            const isChatbotAvailable = {{ chatbot_available | tojson }};
+            const isChatEnabled = !!reportContext && isChatbotAvailable;
+
+             if (chatColumn) {
+                 const enableChatUI = (enable) => {
+                     chatColumn.classList.toggle('disabled', !enable);
+                     if (chatInput) chatInput.disabled = !enable;
+                     if (sendButton) sendButton.disabled = !enable;
+                     if (chatPlaceholder) chatPlaceholder.style.display = enable ? 'none' : 'block';
+                     if (exampleQuestionsContainer) exampleQuestionsContainer.style.display = enable ? 'block' : 'none';
+                 };
+                 enableChatUI(isChatEnabled);
+                 if (isChatEnabled && chatMessages) {
+                     chatMessages.scrollTop = chatMessages.scrollHeight;
+                 }
+             }
+
+            function addChatMessage(message, sender, isThinking = false) {
+                if (!chatMessages) return null;
+                const messageDiv = document.createElement('div');
+                messageDiv.classList.add('chat-message', sender === 'user' ? 'user-message' : 'bot-message');
+                if (isThinking) {
+                    messageDiv.classList.add('thinking');
+                    messageDiv.innerHTML = '<span> Thinking...</span>';
+                } else {
+                    const sanitizedMessage = message.replace(/</g, "<").replace(/>/g, ">");
+                    messageDiv.innerHTML = sanitizedMessage;
+                }
+                chatMessages.appendChild(messageDiv);
+                chatMessages.scrollTo({ top: chatMessages.scrollHeight, behavior: 'smooth' });
+                return messageDiv;
+            }
+
+            if (chatForm && isChatEnabled) {
+                chatForm.addEventListener('submit', async (e) => {
+                    e.preventDefault();
+                    if (!chatInput || !reportContext) return;
+                    const question = chatInput.value.trim();
+                    if (!question || chatInput.disabled) return; // Prevent multiple submits
+
+                    addChatMessage(question, 'user');
+                    chatInput.value = '';
+                    chatInput.disabled = true; // Disable during processing
+                    if (sendButton) sendButton.disabled = true;
+                    const thinkingMessageElement = addChatMessage('', 'bot', true);
+
+                    try {
+                        const response = await fetch("{{ url_for('chat') }}", {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify({ question: question, report_context: reportContext }),
+                        });
+                        if (thinkingMessageElement) thinkingMessageElement.remove(); // Remove thinking indicator
+
+                        if (!response.ok) {
+                            let errorMsg = `Chat Error: ${response.status || ''} ${response.statusText}`;
+                            try {
+                                const errorData = await response.json();
+                                errorMsg = `Chat Error: ${errorData.error || response.statusText}`;
+                            } catch (e) { /* Ignore */ }
+                            // Use CSS vars for error color - find the finding highlight color
+                            addChatMessage(errorMsg, 'bot').style.color = 'var(--highlight-finding-color)';
+                        } else {
+                            const data = await response.json();
+                            addChatMessage(data.answer || "Received empty response.", 'bot');
+                        }
+                    } catch (error) {
+                        console.error("Chat fetch error:", error);
+                        if (thinkingMessageElement) thinkingMessageElement.remove();
+                        addChatMessage('Error connecting to the chat service.', 'bot').style.color = 'var(--highlight-finding-color)';
+                    } finally {
+                        if(chatInput) chatInput.disabled = false; // Re-enable input
+                        if(sendButton) sendButton.disabled = false; // Re-enable button
+                        if(chatInput) chatInput.focus();
+                        if(chatMessages) chatMessages.scrollTo({ top: chatMessages.scrollHeight, behavior: 'smooth' });
+                    }
+                });
+            } else if (chatForm) { chatForm.addEventListener('submit', (e) => e.preventDefault()); }
+
+            if (exampleQuestionsContainer && chatInput && isChatEnabled) {
+                exampleQuestionsContainer.addEventListener('click', (e) => {
+                    if (e.target?.classList.contains('suggestion-btn')) {
+                         e.preventDefault();
+                        const questionText = e.target.textContent || e.target.innerText;
+                        if (questionText && !chatInput.disabled) { chatInput.value = questionText; chatInput.focus(); }
+                    }
+                });
+            }
+
+            // --- Image Hover Zoom Functionality (with Slider) ---
+            const imagePreview = document.getElementById('uploaded-image');
+            const zoomPanel = document.getElementById('zoom-preview-panel');
+            const imageContainer = document.getElementById('image-result-area');
+            const zoomSlider = document.getElementById('zoom-slider');
+            const zoomValueDisplay = document.getElementById('zoom-value');
+            const zoomControls = document.getElementById('zoom-controls');
+
+            if (imagePreview && zoomPanel && imageContainer && zoomSlider && zoomValueDisplay && zoomControls) {
+                 let naturalWidth = 0, naturalHeight = 0;
+                 let currentZoomLevel = parseFloat(zoomSlider.value);
+                 let lastPercX = 0.5, lastPercY = 0.5;
+                 let isZoomActive = false;
+
+                 const updateZoomPanelBackground = () => {
+                    if (naturalWidth > 0 && isZoomActive) { // Check isZoomActive here
+                        zoomPanel.style.backgroundSize = `${naturalWidth * currentZoomLevel}px ${naturalHeight * currentZoomLevel}px`;
+                        const panelRect = zoomPanel.getBoundingClientRect();
+                        const bgX = -(lastPercX * (naturalWidth * currentZoomLevel - panelRect.width));
+                        const bgY = -(lastPercY * (naturalHeight * currentZoomLevel - panelRect.height));
+                        zoomPanel.style.backgroundPosition = `${bgX}px ${bgY}px`;
+                    }
+                 };
+
+                 const updateImageDimensions = () => {
+                     naturalWidth = imagePreview.naturalWidth;
+                     naturalHeight = imagePreview.naturalHeight;
+                     // No need to call updateZoomPanelBackground here, it happens on mouseenter
+                     if (naturalWidth === 0 && zoomControls) {
+                         zoomControls.style.display = 'none';
+                     }
+                 };
+
+                 if (imagePreview.complete && imagePreview.naturalWidth > 0) { updateImageDimensions(); }
+                 else { imagePreview.onload = updateImageDimensions; imagePreview.onerror = updateImageDimensions; }
+
+
+                 imageContainer.addEventListener('mouseenter', () => {
+                     if (naturalWidth > 0 && window.innerWidth >= 992) {
+                        isZoomActive = true; // Set flag first
+                        zoomPanel.style.backgroundImage = `url('${imagePreview.src}')`;
+                        updateZoomPanelBackground(); // Now update with current mouse pos/zoom
+                        zoomPanel.style.opacity = '1'; zoomPanel.style.visibility = 'visible';
+                        zoomPanel.style.transition = 'opacity 0.2s ease-out, visibility 0s linear 0s, background-color var(--transition-speed) var(--transition-easing), border-color var(--transition-speed) var(--transition-easing)';
+                     }
+                 });
+
+                 imageContainer.addEventListener('mousemove', (e) => {
+                    if (!isZoomActive || naturalWidth === 0) return;
+                    const imgRect = imagePreview.getBoundingClientRect();
+                    lastPercX = Math.max(0, Math.min(1, (e.clientX - imgRect.left) / imgRect.width));
+                    lastPercY = Math.max(0, Math.min(1, (e.clientY - imgRect.top) / imgRect.height));
+                    updateZoomPanelBackground();
+
+                    // Position calculation remains the same
+                    const containerRect = imageContainer.getBoundingClientRect();
+                    const panelRect = zoomPanel.getBoundingClientRect(); // Get updated rect if size changed
+                    const gap = 15;
+                    let panelLeft = 'auto', panelRight = 'auto';
+                    if ((window.innerWidth - containerRect.right - gap) >= panelRect.width) {
+                        panelLeft = `${imgRect.right - containerRect.left + gap}px`;
+                    } else if ((containerRect.left - gap) >= panelRect.width) {
+                        panelRight = `${containerRect.right - imgRect.left + gap}px`;
+                    } else {
+                         panelLeft = `${imgRect.right - containerRect.left + gap}px`; // Default right
+                    }
+                    zoomPanel.style.left = panelLeft;
+                    zoomPanel.style.right = panelRight;
+                    zoomPanel.style.top = `${imgRect.top - containerRect.top}px`;
+                 });
+
+                imageContainer.addEventListener('mouseleave', () => {
+                    isZoomActive = false; // Reset flag
+                    zoomPanel.style.opacity = '0'; zoomPanel.style.visibility = 'hidden';
+                    zoomPanel.style.transition = 'opacity 0.2s ease-out, visibility 0s linear 0.2s, background-color var(--transition-speed) var(--transition-easing), border-color var(--transition-speed) var(--transition-easing)';
+                });
+
+                zoomSlider.addEventListener('input', () => {
+                    currentZoomLevel = parseFloat(zoomSlider.value);
+                    zoomValueDisplay.textContent = currentZoomLevel.toFixed(1);
+                    updateZoomPanelBackground(); // Update view immediately
+                });
+            }
+
+            // --- Student Notes Functionality ---
+            const notesTextArea = document.getElementById('student-notes-textarea');
+            const keywordsInput = document.getElementById('student-notes-keywords');
+            const copyNotesButton = document.getElementById('copy-notes-button');
+            const copyFeedback = document.getElementById('copy-feedback');
+
+            if (copyNotesButton && notesTextArea && keywordsInput && copyFeedback) {
+                copyNotesButton.addEventListener('click', () => {
+                    const notes = notesTextArea.value.trim();
+                    const keywords = keywordsInput.value.trim();
+                    let textToCopy = "--- Medical Student Notes ---\n\n";
+                    if (keywords) { textToCopy += `Keywords/Tags:\n${keywords}\n\n`; }
+                    if (notes) { textToCopy += `Observations & Learning Points:\n${notes}\n`; }
+                    else if (!keywords) { textToCopy += "(No notes or keywords entered)"; }
+
+                    navigator.clipboard.writeText(textToCopy).then(() => {
+                        copyFeedback.textContent = 'Copied!';
+                        copyFeedback.classList.remove('text-danger');
+                        copyFeedback.classList.add('text-success');
+                        copyFeedback.style.opacity = '1';
+                        copyNotesButton.disabled = true;
+                        copyNotesButton.innerHTML = '<i class="fas fa-check me-1"></i> Copied!';
+                        setTimeout(() => {
+                            copyFeedback.style.opacity = '0';
+                            copyNotesButton.disabled = false;
+                            copyNotesButton.innerHTML = '<i class="fas fa-copy me-1"></i> Copy Notes & Keywords to Clipboard';
+                        }, 2000);
+                    }).catch(err => {
+                        console.error('Failed to copy notes: ', err);
+                        copyFeedback.textContent = 'Copy Failed!';
+                        copyFeedback.classList.remove('text-success');
+                        copyFeedback.classList.add('text-danger');
+                        copyFeedback.style.opacity = '1';
+                        // Don't disable the button on failure
+                        setTimeout(() => {
+                           copyFeedback.style.opacity = '0';
+                           // Reset text after a delay
+                           setTimeout(() => {
+                                if (copyFeedback.style.opacity === '0') { // Only reset if still hidden
+                                    copyFeedback.textContent = 'Copied!';
+                                    copyFeedback.classList.remove('text-danger');
+                                    copyFeedback.classList.add('text-success');
+                                }
+                           }, 500); // Delay before resetting text allows fade out
+                        }, 2500);
+                    });
+                });
+            }
+
+            // --- Reset Button Functionality ---
+            const resetButton = document.getElementById('reset-button');
+             if(resetButton) {
+                 resetButton.addEventListener('click', () => { window.location.href = "{{ url_for('index') }}"; });
+             }
+
+        }); // End DOMContentLoaded
+    </script>
+
+</body>
+</html>