Made responsive

static/css/alternativesStyle.css

@@ -1,5 +1,7 @@
+/* ===================================================================
+   1. GLOBAL VARIABLES & RESET
+   ================================================================= */
 :root {
-    /* Your new dark theme color palette */
     --bg-deep-dark: #0a192f;
     --bg-medium-dark: #172a46;
     --bg-light-dark: #2c3e50;
@@ -8,221 +10,395 @@
     --text-muted: #8892b0;
     --accent-primary: #64ffda;
     --accent-primary-darker: #52d3b4;
-    --accent-primary-text: #0a192f; /* Dark text for bright buttons */
+    --accent-primary-text: #0a192f;
     --border-color: #304a6e;
     --card-shadow: 0 10px 30px -15px rgba(2, 12, 27, 0.7);
-
-    /* Old variables for reference (now replaced) */
-    /* --primary-color: #007bff; */
-    /* --secondary-color: #6c757d; */
-    /* --success-color: #28a745; */
-    /* --background-light: #f8f9fa; */
-    /* --text-dark: #343a40; */
-    /* --white: #ffffff; */
 }
 
-body {
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+* {
     margin: 0;
     padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
     background-color: var(--bg-deep-dark);
     color: var(--text-normal);
+    line-height: 1.6;
+    font-size: 16px;
+    background-image: linear-gradient(rgba(10, 25, 47, 0.9), rgba(10, 25, 47, 0.9)),
+                      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><path fill="%23172a46" fill-opacity="0.3" d="M0 0 H40 V40 H0 Z M20 0 V40 M0 20 H40"></path></svg>');
+    background-size: 40px 40px;
+    background-repeat: repeat;
+    overflow-x: hidden;
 }
 
-/* --- Header --- */
-header { 
-    background-color: var(--bg-medium-dark); 
-    color: var(--text-bright); 
-    padding: 1rem 0;
+a {
+    text-decoration: none;
+    color: inherit;
+    transition: color 0.3s;
+}
+
+/* ===================================================================
+   2. HEADER & NAVIGATION (Responsive)
+   ================================================================= */
+header {
+    background-color: rgba(10, 25, 47, 0.95);
+    padding: 1rem 5%;
     border-bottom: 1px solid var(--border-color);
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+    backdrop-filter: blur(10px);
 }
-nav { display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
-.logo { font-size: 1.5rem; font-weight: bold; color: var(--accent-primary); }
-nav ul { list-style: none; display: flex; margin: 0; padding: 0; }
-nav ul li { margin-left: 20px; }
-nav ul li a { 
-    color: var(--text-bright); 
-    text-decoration: none; 
-    padding: 5px 10px; 
-    border-radius: 5px; 
-    transition: background-color 0.3s, color 0.3s; 
-}
-nav ul li a:hover, nav ul li a.active { 
-    background-color: var(--accent-primary);
-    color: var(--accent-primary-text);
+
+nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    max-width: 1200px;
+    margin: 0 auto;
+    flex-wrap: wrap;
+}
+
+.logo {
+    font-size: 1.5rem;
+    font-weight: bold;
+    color: var(--accent-primary);
+    letter-spacing: 1px;
+}
+
+nav ul {
+    list-style: none;
+    display: flex;
+    gap: 1.5rem;
+}
+
+nav a {
+    color: var(--text-normal);
+    font-weight: 500;
+    padding: 0.5rem 0;
+    font-size: 0.95rem;
+}
+
+nav a:hover, nav a.active {
+    color: var(--accent-primary);
+    border-bottom: 2px solid var(--accent-primary);
 }
 
-/* --- Main Layout --- */
-main { max-width: 1000px; margin: 40px auto; padding: 0 20px; }
+/* ===================================================================
+   3. HERO & SEARCH LAYOUT
+   ================================================================= */
+main {
+    max-width: 1100px;
+    margin: 2rem auto;
+    padding: 0 5%;
+}
 
 .hero {
     background-color: var(--bg-medium-dark);
-    padding: 30px;
-    border-radius: 10px;
+    padding: 2.5rem;
+    border-radius: 12px;
     box-shadow: var(--card-shadow);
     text-align: center;
     border: 1px solid var(--border-color);
 }
 
+.hero h1 {
+    color: var(--text-bright);
+    margin-bottom: 0.5rem;
+    font-size: 2rem;
+}
+
 .hero p {
-    color: var(--text-normal);
+    color: var(--text-muted);
+    font-size: 1.1rem;
+    margin-bottom: 2rem;
 }
 
-/* --- Two-Column Search --- */
+/* --- The Search Container (Flexbox) --- */
 .search-container {
     display: flex;
-    align-items: flex-start; /* Align to top */
+    align-items: stretch; /* Make both boxes same height */
     justify-content: center;
-    margin-top: 30px;
-    gap: 30px;
+    margin-top: 2rem;
+    gap: 20px;
 }
 
 .search-form {
     flex: 1;
     background: var(--bg-light-dark);
-    padding: 20px;
+    padding: 2rem;
     border-radius: 8px;
     border: 1px solid var(--border-color);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.search-form:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
+    border-color: var(--accent-primary);
 }
 
 .search-form h2 {
-    font-size: 1.2rem;
+    font-size: 1.25rem;
     color: var(--accent-primary);
-    margin-bottom: 15px;
+    margin-bottom: 1.5rem;
     text-align: center;
 }
 
 .or-divider {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     font-weight: bold;
-    color: var(--text-muted);
-    font-size: 1.2rem;
+    color: var(--text-bright);
+    font-size: 1.1rem;
     background: var(--bg-deep-dark);
-    padding: 10px 15px;
+    width: 50px;
+    height: 50px;
     border-radius: 50%;
-    border: 1px solid var(--border-color);
-    align-self: center; /* Center it vertically */
+    border: 2px solid var(--border-color);
+    align-self: center;
+    flex-shrink: 0; /* Prevent shrinking */
+    z-index: 2;
 }
 
-/* --- Form Elements --- */
-.form-group { margin-bottom: 15px; }
-input[type="text"] { 
-    width: 100%; 
-    padding: 12px; 
-    border: 1px solid var(--border-color); 
-    border-radius: 6px; 
-    font-size: 16px; 
-    box-sizing: border-box;
+/* ===================================================================
+   4. FORM ELEMENTS
+   ================================================================= */
+.form-group {
+    margin-bottom: 1.5rem;
+    width: 100%;
+    position: relative;
+}
+
+input[type="text"] {
+    width: 100%;
+    padding: 1rem;
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    font-size: 1rem;
     background-color: var(--bg-medium-dark);
     color: var(--text-bright);
+    transition: border-color 0.3s;
 }
-input:focus { 
-    outline: none; 
-    border-color: var(--accent-primary); 
-    box-shadow: 0 0 0 2px rgba(100, 255, 218, 0.3);
-}
-button[type="submit"] { 
-    width: 100%; 
-    padding: 12px; 
-    background-color: var(--accent-primary); 
-    color: var(--accent-primary-text); 
-    border: none; 
-    border-radius: 6px; 
-    font-size: 16px; 
-    font-weight: bold; 
-    cursor: pointer; 
-    transition: background-color 0.3s; 
-}
-button[type="submit"]:hover { background-color: var(--accent-primary-darker); }
-
-/* --- Autocomplete --- */
-.autocomplete-container { position: relative; }
-.suggestions-box { 
-    position: absolute; 
-    top: 100%; 
-    left: 0; 
-    right: 0; 
-    z-index: 10; 
-    background-color: var(--bg-light-dark); 
-    border: 1px solid var(--border-color); 
-    border-top: none; 
-    max-height: 200px; 
-    overflow-y: auto; 
-    border-radius: 0 0 6px 6px; 
-    display: none; 
-    box-shadow: var(--card-shadow); 
-    text-align: left; 
-}
-.suggestion-item { 
-    padding: 10px 12px; 
-    cursor: pointer; 
+
+input:focus {
+    outline: none;
+    border-color: var(--accent-primary);
+    box-shadow: 0 0 0 2px rgba(100, 255, 218, 0.1);
+}
+
+button[type="submit"] {
+    width: 100%;
+    padding: 1rem;
+    background-color: var(--accent-primary);
+    color: var(--accent-primary-text);
+    border: none;
+    border-radius: 6px;
+    font-size: 1rem;
+    font-weight: bold;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+button[type="submit"]:hover {
+    background-color: var(--accent-primary-darker);
+}
+
+/* --- Autocomplete Dropdown --- */
+.autocomplete-container {
+    position: relative;
+}
+
+.suggestions-box {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    z-index: 100;
+    background-color: var(--bg-light-dark);
+    border: 1px solid var(--accent-primary);
+    border-top: none;
+    max-height: 200px;
+    overflow-y: auto;
+    border-radius: 0 0 6px 6px;
+    display: none;
+    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
+    text-align: left;
+}
+
+.suggestion-item {
+    padding: 12px 15px;
+    cursor: pointer;
     transition: background-color 0.2s;
     color: var(--text-normal);
+    border-bottom: 1px solid var(--border-color);
+}
+
+.suggestion-item:last-child { border-bottom: none; }
+
+.suggestion-item:hover {
+    background-color: var(--bg-medium-dark);
+    color: var(--accent-primary);
+}
+
+/* ===================================================================
+   5. RESULTS SECTION
+   ================================================================= */
+#results-section {
+    margin-top: 3rem;
 }
-.suggestion-item:hover { background-color: var(--bg-medium-dark); color: var(--text-bright); }
 
-/* --- Results Section --- */
-#results-section { margin-top: 40px; }
-.hidden { display: none !important; }
+.hidden {
+    display: none !important;
+}
 
-#results-section h2, #results-section h3 {
+#results-section h2 {
     color: var(--text-bright);
+    margin-bottom: 1.5rem;
+    font-size: 1.5rem;
+    border-left: 4px solid var(--accent-primary);
+    padding-left: 1rem;
 }
+
+#results-section h3 {
+    color: var(--text-normal);
+    margin: 2rem 0 1rem 0;
+}
+
 #results-section h3 span {
     color: var(--accent-primary);
     font-style: italic;
 }
 
+/* Primary Drug Card */
 #primary-drug-info {
-    margin-bottom: 40px;
-    padding: 20px;
+    margin-bottom: 3rem;
+    padding: 2rem;
     background: var(--bg-medium-dark);
-    border-radius: 10px;
+    border-radius: 12px;
     border: 1px solid var(--border-color);
 }
 
 .drug-card {
     background-color: var(--bg-light-dark);
-    padding: 20px;
+    padding: 1.5rem;
     border-radius: 8px;
     box-shadow: var(--card-shadow);
     border: 1px solid var(--border-color);
     display: flex;
     flex-direction: column;
+    transition: transform 0.2s;
+}
+
+.drug-card:hover {
+    border-color: var(--accent-primary);
 }
 
 .drug-card.primary {
     border-left: 5px solid var(--accent-primary);
-    margin-bottom: 20px;
 }
 
 .drug-name {
-    font-size: 1.3rem;
+    font-size: 1.4rem;
     font-weight: bold;
     color: var(--accent-primary);
-    margin-bottom: 10px;
+    margin-bottom: 1rem;
+    display: block;
 }
 
 .drug-card strong {
     color: var(--text-bright);
-    margin-bottom: 5px;
+    display: block;
+    margin-top: 0.5rem;
 }
 
 .side-effects-list {
-    margin: 0;
-    padding-left: 20px;
-    color: var(--text-muted);
+    margin-top: 0.5rem;
+    padding-left: 1.2rem;
+    color: var(--text-normal);
     font-size: 0.95rem;
 }
 
 .side-effects-list li {
-    margin-bottom: 5px;
+    margin-bottom: 0.25rem;
 }
 
+/* Alternatives Grid */
 .results-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-    gap: 20px;
+    /* Responsive Grid Logic */
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: 1.5rem;
 }
 
-/* --- Footer --- */
-footer { text-align: center; padding: 20px; margin-top: 40px; color: var(--text-muted); }
+/* ===================================================================
+   6. RESPONSIVE MEDIA QUERIES
+   ================================================================= */
+
+/* Tablet & Mobile Navigation */
+@media (max-width: 900px) {
+    header { padding: 1rem; }
+    
+    nav {
+        flex-direction: column;
+        gap: 1rem;
+    }
+
+    nav ul {
+        flex-wrap: wrap;
+        justify-content: center;
+        width: 100%;
+        gap: 1rem;
+    }
+}
+
+/* Mobile Layout */
+@media (max-width: 768px) {
+    .hero {
+        padding: 1.5rem;
+    }
+
+    .hero h1 { font-size: 1.75rem; }
+
+    /* Stack the search forms */
+    .search-container {
+        flex-direction: column;
+        gap: 1rem;
+        align-items: stretch;
+    }
+
+    .or-divider {
+        margin: 0.5rem auto; /* Center horizontally */
+        transform: scale(0.8); /* Slightly smaller on mobile */
+    }
+
+    .search-form {
+        width: 100%;
+        padding: 1.5rem;
+    }
+
+    /* Adjust Grid for smaller phones */
+    .results-grid {
+        grid-template-columns: 1fr; /* Single column on phones */
+    }
+}
+
+/* ===================================================================
+   7. FOOTER
+   ================================================================= */
+footer {
+    text-align: center;
+    padding: 2rem 5%;
+    margin-top: 4rem;
+    background-color: var(--bg-medium-dark);
+    color: var(--text-muted);
+    font-size: 0.9rem;
+    border-top: 1px solid var(--border-color);
+}

static/css/assistantStyle.css

@@ -1,22 +1,22 @@
-/* --- 1. GLOBAL STYLES & THEME VARIABLES --- */
-
+/* ===================================================================
+   1. GLOBAL VARIABLES & RESET
+   ================================================================= */
 :root {
-    --bg-primary: #0a192f;
-    --bg-secondary: #172a46;
-    --text-primary: #ccd6f6;
-    --text-secondary: #bdc3c7;
+    --bg-deep-dark: #0a192f;
+    --bg-medium-dark: #172a46;
+    --bg-light-dark: #2c3e50;
+    --text-bright: #ccd6f6;
+    --text-normal: #bdc3c7;
     --text-muted: #8892b0;
     --accent-primary: #64ffda;
     --accent-primary-darker: #52d3b4;
-    --accent-primary-text: #0a192f; /* Dark text for bright buttons */
+    --accent-primary-text: #0a192f;
     --border-color: #304a6e;
+    --success-color: #2ecc71;
     --card-shadow: 0 10px 30px -15px rgba(2, 12, 27, 0.7);
-
-    /* Transitions */
-    --theme-transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
+    --theme-transition: background-color 0.3s ease, color 0.3s ease;
 }
 
-/* 1.2 Global Resets & Body */
 * {
     box-sizing: border-box;
     margin: 0;
@@ -24,56 +24,89 @@
 }
 
 body {
-    font-family: 'Inter', sans-serif;
-    background-color: var(--bg-primary);
-    color: var(--text-secondary);
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    background-color: var(--bg-deep-dark);
+    color: var(--text-normal);
     line-height: 1.6;
-    transition: var(--theme-transition);
+    font-size: 16px;
+    background-image: linear-gradient(rgba(10, 25, 47, 0.9), rgba(10, 25, 47, 0.9)),
+                      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><path fill="%23172a46" fill-opacity="0.3" d="M0 0 H40 V40 H0 Z M20 0 V40 M0 20 H40"></path></svg>');
+    background-size: 40px 40px;
 }
 
-/* --- Header --- */
-header { 
-    background-color: var(--bg-medium-dark); 
-    color: var(--text-bright); 
-    padding: 1rem 0;
+a { text-decoration: none; color: inherit; }
+
+/* ===================================================================
+   2. HEADER & NAVIGATION (Responsive)
+   ================================================================= */
+header {
+    background-color: rgba(10, 25, 47, 0.95);
+    padding: 1rem 5%;
     border-bottom: 1px solid var(--border-color);
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+    backdrop-filter: blur(10px);
 }
-nav { display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
-.logo { font-size: 1.5rem; font-weight: bold; color: var(--accent-primary); }
-nav ul { list-style: none; display: flex; margin: 0; padding: 0; }
-nav ul li { margin-left: 20px; }
-nav ul li a { 
-    color: var(--text-bright); 
-    text-decoration: none; 
-    padding: 5px 10px; 
-    border-radius: 5px; 
-    transition: background-color 0.3s, color 0.3s; 
-}
-nav ul li a:hover, nav ul li a.active { 
-    background-color: var(--accent-primary);
-    color: var(--accent-primary-text);
+
+nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    max-width: 1200px;
+    margin: 0 auto;
+    flex-wrap: wrap;
+}
+
+.logo {
+    font-size: 1.5rem;
+    font-weight: bold;
+    color: var(--accent-primary);
+    letter-spacing: 1px;
 }
-/* --- 3. (Dark Mode Toggle styles removed) --- */
 
-/* --- 4. MAIN CONTENT & LAYOUT --- */
+nav ul {
+    list-style: none;
+    display: flex;
+    gap: 1.5rem;
+    margin: 0;
+    padding: 0;
+}
+
+nav a {
+    color: var(--text-normal);
+    font-weight: 500;
+    transition: color 0.3s;
+    padding: 0.5rem 0;
+    font-size: 0.95rem;
+}
+
+nav a:hover, nav a.active {
+    color: var(--accent-primary);
+    border-bottom: 2px solid var(--accent-primary);
+}
+
+/* ===================================================================
+   3. MAIN LAYOUT
+   ================================================================= */
 main {
-    max-width: 1200px;
+    max-width: 1100px;
     margin: 2rem auto;
-    padding: 0 1rem;
+    padding: 0 5%;
 }
 
 .card {
-    background-color: var(--bg-secondary);
+    background-color: var(--bg-medium-dark);
     border-radius: 12px;
     padding: 1.5rem;
     margin-bottom: 1.5rem;
     box-shadow: var(--card-shadow);
     border: 1px solid var(--border-color);
-    transition: var(--theme-transition), box-shadow 0.3s ease;
+    transition: transform 0.2s ease;
 }
 
 .card h3 {
-    color: var(--text-primary);
+    color: var(--accent-primary);
     margin-top: 0;
     margin-bottom: 1rem;
     padding-bottom: 0.75rem;
@@ -81,82 +114,129 @@ main {
     display: flex;
     align-items: center;
     font-size: 1.2rem;
+    flex-wrap: wrap; /* Allows live indicator to wrap if needed */
 }
 
 .card h3 i {
     margin-right: 0.75rem;
-    color: var(--accent-primary);
+}
+
+/* Live Indicator (Green Bolt) */
+.live-indicator {
+    font-size: 0.8rem;
+    color: var(--success-color);
+    margin-left: auto; /* Pushes to the right */
+    background: rgba(46, 204, 113, 0.1);
+    padding: 2px 8px;
+    border-radius: 12px;
+    border: 1px solid var(--success-color);
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
 }
 
 .card-content {
-    color: var(--text-secondary);
-    min-height: 50px;
+    color: var(--text-bright);
+    min-height: 60px;
     line-height: 1.7;
+    font-size: 0.95rem;
 }
 
-/* --- 5. INSIGHT GRID --- */
+/* ===================================================================
+   4. INSIGHT GRID (Diagnosis & Questions)
+   ================================================================= */
 .insight-grid {
     display: grid;
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: 1fr 1fr; /* Two equal columns */
     gap: 1.5rem;
+    margin-bottom: 1.5rem;
 }
 
-#diagnosisOutput,
-#questionsOutput {
-    font-style: italic;
-    color: var(--text-muted);
-    font-size: 0.95rem;
+/* Text styling for LLM output */
+#diagnosisOutput strong, #questionsOutput strong {
+    color: var(--accent-primary);
+    font-weight: 600;
 }
 
-/* --- 6. CONVERSATION SECTION --- */
+/* ===================================================================
+   5. CONVERSATION LOG
+   ================================================================= */
 .conversation-log {
-    height: 300px;
+    height: 350px;
     overflow-y: auto;
     border: 1px solid var(--border-color);
     border-radius: 8px;
     padding: 1rem;
     margin-bottom: 1.5rem;
-    background-color: var(--bg-primary); /* Slightly different background */
-    transition: var(--theme-transition);
+    background-color: var(--bg-deep-dark); /* Darker inner well */
+    scroll-behavior: smooth;
 }
 
 .log-entry {
     margin-bottom: 0.75rem;
-    padding: 0.5rem 1rem;
+    padding: 0.75rem 1rem;
     border-radius: 8px;
     line-height: 1.5;
+    font-size: 0.95rem;
+    word-wrap: break-word; /* Prevent long words breaking layout */
 }
 
 .log-entry.patient {
-    background-color: #2c3e50; /* bg-light-dark */
-    border: 1px solid var(--border-color);
-    color: var(--text-secondary);
+    background-color: var(--bg-light-dark);
+    border-left: 3px solid var(--accent-primary);
+    color: var(--text-bright);
+}
+
+.log-entry strong {
+    color: var(--accent-primary);
+    font-size: 0.85rem;
+    display: block;
+    margin-bottom: 0.25rem;
 }
 
-/* --- 7. CONTROLS, BUTTONS & STATUS --- */
+/* Scrollbar styling */
+.conversation-log::-webkit-scrollbar {
+    width: 8px;
+}
+.conversation-log::-webkit-scrollbar-track {
+    background: var(--bg-deep-dark);
+}
+.conversation-log::-webkit-scrollbar-thumb {
+    background: var(--border-color);
+    border-radius: 4px;
+}
+
+/* ===================================================================
+   6. CONTROLS AREA
+   ================================================================= */
 .controls {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-top: 1rem;
+    background-color: var(--bg-light-dark);
+    padding: 1rem;
+    border-radius: 8px;
+    border: 1px solid var(--border-color);
 }
 
 .status-indicator {
     display: flex;
     align-items: center;
+    gap: 10px;
 }
 
 #micStatus {
-    width: 12px;
-    height: 12px;
+    width: 14px;
+    height: 14px;
     border-radius: 50%;
     background-color: var(--text-muted);
-    margin-right: 0.75rem;
     transition: background-color 0.3s ease;
 }
 
 #micStatus.active {
     background-color: var(--accent-primary);
+    box-shadow: 0 0 10px var(--accent-primary);
 }
 
 /* Pulse Animation */
@@ -165,20 +245,17 @@ main {
 }
 
 @keyframes pulse {
-    0% {
-        box-shadow: 0 0 0 0 rgba(100, 255, 218, 0.4);
-    }
-    70% {
-        box-shadow: 0 0 0 10px rgba(100, 255, 218, 0);
-    }
-    100% {
-        box-shadow: 0 0 0 0 rgba(100, 255, 218, 0);
-    }
+    0% { box-shadow: 0 0 0 0 rgba(100, 255, 218, 0.4); }
+    70% { box-shadow: 0 0 0 10px rgba(100, 255, 218, 0); }
+    100% { box-shadow: 0 0 0 0 rgba(100, 255, 218, 0); }
 }
 
 #statusText {
-    color: var(--text-muted);
-    font-weight: 500;
+    color: var(--text-bright);
+    font-weight: 600;
+    font-size: 0.9rem;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
 }
 
 .btn-group {
@@ -189,19 +266,16 @@ main {
 .btn {
     padding: 0.75rem 1.5rem;
     border: none;
-    border-radius: 8px;
+    border-radius: 6px;
     cursor: pointer;
     font-weight: 600;
     font-size: 0.95rem;
-    font-family: 'Inter', sans-serif;
-    transition: background-color 0.2s ease, transform 0.1s ease;
+    transition: all 0.2s ease;
     display: flex;
     align-items: center;
+    justify-content: center;
     gap: 0.5rem;
-}
-
-.btn:active {
-    transform: scale(0.98);
+    min-width: 100px;
 }
 
 .btn-restart {
@@ -211,58 +285,72 @@ main {
 
 .btn-restart:hover {
     background-color: var(--accent-primary-darker);
+    transform: translateY(-2px);
 }
 
 .btn-finish {
-    background-color: var(--bg-primary);
-    color: var(--text-secondary);
-    border: 1px solid var(--border-color);
+    background-color: transparent;
+    color: #ff5555; /* Red warning color for stop */
+    border: 1px solid #ff5555;
 }
 
 .btn-finish:hover {
-    background-color: var(--border-color);
-    color: var(--text-primary);
+    background-color: #ff5555;
+    color: white;
 }
 
-/* --- 8. RESPONSIVENESS (Mobile) --- */
+/* ===================================================================
+   7. RESPONSIVE MEDIA QUERIES
+   ================================================================= */
+
+/* Tablets and Mobile Devices */
 @media (max-width: 900px) {
+    /* Collapse the side-by-side grid */
     .insight-grid {
         grid-template-columns: 1fr;
     }
+}
 
+/* Mobile Phones specifically */
+@media (max-width: 768px) {
     header {
         padding: 1rem;
     }
 
+    nav {
+        flex-direction: column;
+        gap: 1rem;
+    }
+
     nav ul {
-        display: none; /* Simple responsive behavior */
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 1rem;
     }
-}
 
-@media (max-width: 600px) {
-    body {
-        font-size: 14px;
+    nav a {
+        font-size: 0.9rem;
     }
 
     main {
-        padding: 0 0.5rem;
-        margin: 1rem auto;
-    }
-    
-    header {
-        flex-direction: column;
-        gap: 1rem;
+        padding: 0 1rem;
     }
 
-    nav {
-        width: 100%;
-        justify-content: space-between;
+    .card {
+        padding: 1.25rem;
     }
 
+    /* Stack controls vertically on mobile */
     .controls {
         flex-direction: column;
-        align-items: stretch;
-        gap: 1.5rem;
+        align-items: stretch; /* Make children full width */
+        gap: 1.25rem;
+    }
+
+    .status-indicator {
+        justify-content: center;
+        padding-bottom: 0.5rem;
+        border-bottom: 1px solid rgba(255,255,255,0.1);
     }
 
     .btn-group {
@@ -271,18 +359,13 @@ main {
     }
 
     .btn {
-        justify-content: center;
+        width: 100%; /* Full width buttons for easy tapping */
+        padding: 1rem; /* Larger touch target */
     }
-}
-
-
-/* Small addition for the live indicator */
-        .live-indicator {
-            font-size: 0.8rem;
-            color: #2ecc71;
-            margin-left: 10px;
-            display: none; /* Hidden by default */
-        }
-        .live-indicator.active {
-            display: inline-block;
-        }
+    
+    .live-indicator {
+        margin-left: 0;
+        margin-top: 5px;
+        width: 100%; /* Optional: make it block level */
+    }
+}

static/css/chatStyle.css

@@ -1,3 +1,6 @@
+/* ===================================================================
+   1. GLOBAL VARIABLES & RESET
+   ================================================================= */
 :root {
     --bg-deep-dark: #0a192f;
     --bg-medium-dark: #172a46;
@@ -12,51 +15,83 @@
     --card-shadow: 0 10px 30px -15px rgba(2, 12, 27, 0.7);
 }
 
-body {
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+* {
     margin: 0;
     padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     background-color: var(--bg-deep-dark);
     color: var(--text-normal);
-    height: 100vh;
+    /* Vital for a full-screen chat app layout */
+    height: 100vh; 
+    height: 100dvh; /* Dynamic viewport height for mobile browsers */
     display: flex;
     flex-direction: column;
+    overflow: hidden; /* Prevent body scroll, only chat window scrolls */
 }
 
-/* --- Header (Same as others for consistency) --- */
-header { 
-    background-color: var(--bg-medium-dark); 
-    padding: 1rem 0;
+a { text-decoration: none; color: inherit; }
+
+/* ===================================================================
+   2. HEADER & NAVIGATION (Responsive)
+   ================================================================= */
+header {
+    background-color: var(--bg-medium-dark);
+    padding: 1rem 5%;
     border-bottom: 1px solid var(--border-color);
-    flex-shrink: 0; /* Don't shrink header */
-}
-nav { display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
-.logo { font-size: 1.5rem; font-weight: bold; color: var(--accent-primary); }
-nav ul { list-style: none; display: flex; margin: 0; padding: 0; }
-nav ul li { margin-left: 20px; }
-nav ul li a { 
-    color: var(--text-bright); 
-    text-decoration: none; 
-    padding: 5px 10px; 
-    border-radius: 5px; 
-    transition: background-color 0.3s, color 0.3s; 
-}
-nav ul li a:hover, nav ul li a.active { 
-    background-color: var(--accent-primary);
-    color: var(--accent-primary-text);
+    flex-shrink: 0; /* Header never shrinks */
+    z-index: 100;
+}
+
+nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    max-width: 1200px;
+    margin: 0 auto;
+    flex-wrap: wrap;
 }
 
-/* --- Main Chat Layout --- */
+.logo {
+    font-size: 1.5rem;
+    font-weight: bold;
+    color: var(--accent-primary);
+}
+
+nav ul {
+    list-style: none;
+    display: flex;
+    gap: 1.5rem;
+}
+
+nav a {
+    color: var(--text-normal);
+    font-weight: 500;
+    padding: 0.5rem 0;
+    transition: color 0.3s;
+    font-size: 0.95rem;
+}
+
+nav a:hover, nav a.active {
+    color: var(--accent-primary);
+    border-bottom: 2px solid var(--accent-primary);
+}
+
+/* ===================================================================
+   3. MAIN CHAT LAYOUT
+   ================================================================= */
 main {
-    flex-grow: 1;
+    flex-grow: 1; /* Takes up all remaining vertical space */
     display: flex;
     flex-direction: column;
-    max-width: 900px;
-    margin: 20px auto;
     width: 100%;
-    padding: 0 20px;
-    box-sizing: border-box;
-    height: calc(100vh - 140px); /* Approximate height minus header/margins */
+    max-width: 1000px;
+    margin: 0 auto;
+    padding: 20px;
+    overflow: hidden; /* Contains the scrollable chat area */
 }
 
 .chat-container {
@@ -66,30 +101,33 @@ main {
     border: 1px solid var(--border-color);
     display: flex;
     flex-direction: column;
-    height: 100%;
+    height: 100%; /* Fills the main area */
     overflow: hidden;
+    position: relative;
 }
 
+/* --- Header Area --- */
 .chat-header {
-    padding: 20px;
+    padding: 15px 20px;
     background-color: var(--bg-light-dark);
     border-bottom: 1px solid var(--border-color);
     text-align: center;
+    flex-shrink: 0;
 }
 
 .chat-header h1 {
     margin: 0;
-    font-size: 1.5rem;
+    font-size: 1.25rem;
     color: var(--accent-primary);
 }
 
 .chat-header p {
     margin: 5px 0 0;
     color: var(--text-muted);
-    font-size: 0.9rem;
+    font-size: 0.85rem;
 }
 
-/* --- Chat Window (Messages Area) --- */
+/* --- Chat Window (Scrollable Area) --- */
 .chat-window {
     flex-grow: 1;
     padding: 20px;
@@ -98,15 +136,30 @@ main {
     flex-direction: column;
     gap: 15px;
     scroll-behavior: smooth;
+    background-color: rgba(10, 25, 47, 0.5); /* Subtle inner shadow */
+}
+
+/* Custom Scrollbar */
+.chat-window::-webkit-scrollbar {
+    width: 8px;
+}
+.chat-window::-webkit-scrollbar-track {
+    background: var(--bg-deep-dark);
+}
+.chat-window::-webkit-scrollbar-thumb {
+    background: var(--border-color);
+    border-radius: 4px;
 }
 
+/* --- Messages --- */
 .message {
     max-width: 80%;
     padding: 12px 16px;
     border-radius: 18px;
-    line-height: 1.4;
+    line-height: 1.5;
     word-wrap: break-word;
     animation: fadeIn 0.3s ease-in;
+    font-size: 0.95rem;
 }
 
 @keyframes fadeIn {
@@ -118,26 +171,17 @@ main {
     align-self: flex-start;
     background-color: var(--bg-light-dark);
     color: var(--text-bright);
-    border-bottom-left-radius: 4px;
+    border-bottom-left-radius: 2px;
+    border: 1px solid var(--border-color);
 }
 
 .user-message {
     align-self: flex-end;
     background-color: var(--accent-primary);
     color: var(--accent-primary-text);
-    border-bottom-right-radius: 4px;
+    border-bottom-right-radius: 2px;
     font-weight: 500;
-}
-
-.typing-indicator {
-    padding: 10px 16px;
-    background-color: var(--bg-light-dark);
-    color: var(--text-muted);
-    align-self: flex-start;
-    border-radius: 18px;
-    border-bottom-left-radius: 4px;
-    font-style: italic;
-    font-size: 0.9rem;
+    box-shadow: 0 2px 10px rgba(100, 255, 218, 0.2);
 }
 
 /* --- Input Area --- */
@@ -147,6 +191,7 @@ main {
     background-color: var(--bg-light-dark);
     border-top: 1px solid var(--border-color);
     gap: 10px;
+    flex-shrink: 0;
 }
 
 #user-input {
@@ -156,7 +201,8 @@ main {
     border-radius: 25px;
     background-color: var(--bg-deep-dark);
     color: var(--text-bright);
-    font-size: 1rem;
+    font-size: 1rem; /* Keeps iOS from zooming in */
+    transition: border-color 0.3s;
 }
 
 #user-input:focus {
@@ -176,6 +222,7 @@ main {
     align-items: center;
     justify-content: center;
     transition: transform 0.2s, background-color 0.2s;
+    flex-shrink: 0;
 }
 
 .chat-input-area button:hover {
@@ -184,40 +231,99 @@ main {
 }
 
 .chat-input-area button svg {
-    width: 24px;
-    height: 24px;
+    width: 20px;
+    height: 20px;
 }
 
-
-
-/* --- Chat Message Content Styling --- */
-
-/* Ensure list markers are visible */
+/* ===================================================================
+   4. CONTENT FORMATTING (Markdown Support)
+   ================================================================= */
 .bot-message ul, .bot-message ol {
-    margin-top: 8px !important;
-    margin-bottom: 8px !important;
-    padding-left: 25px !important;
-    list-style-type: disc !important; /* Forces bullet points */
+    margin: 8px 0 !important;
+    padding-left: 20px !important;
+    list-style-type: disc !important;
     display: block !important;
 }
 
 .bot-message li {
     margin-bottom: 4px !important;
-    display: list-item !important; /* Ensures it behaves like a list item */
+    display: list-item !important;
 }
 
-/* Styling for bold text */
 .bot-message b, .bot-message strong {
     color: var(--accent-primary);
     font-weight: 700;
 }
 
-/* Styling for the disclaimer */
 .bot-message i {
     opacity: 0.8;
-    font-size: 0.9em;
+    font-size: 0.85em;
     display: block;
-    margin-top: 12px;
-    padding-top: 12px;
-    border-top: 1px solid rgba(255, 255, 255, 0.15);
+    margin-top: 10px;
+    padding-top: 10px;
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+/* ===================================================================
+   5. RESPONSIVE MEDIA QUERIES
+   ================================================================= */
+
+/* Tablet & Mobile Navigation */
+@media (max-width: 900px) {
+    header { padding: 0.75rem 5%; }
+    
+    nav {
+        flex-direction: column;
+        gap: 0.75rem;
+    }
+
+    nav ul {
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 1rem;
+        width: 100%;
+    }
+}
+
+/* Mobile Phones (Full Screen Chat Experience) */
+@media (max-width: 600px) {
+    main {
+        padding: 0; /* Remove padding to make it edge-to-edge */
+        margin: 0;
+        max-width: 100%;
+        /* Calculate height carefully to fit between header and bottom */
+        height: auto; 
+    }
+
+    .chat-container {
+        border-radius: 0;
+        border-left: none;
+        border-right: none;
+        border-bottom: none;
+    }
+
+    .chat-header {
+        padding: 10px 15px;
+    }
+
+    .chat-window {
+        padding: 15px;
+    }
+
+    .message {
+        max-width: 85%; /* Slightly wider bubbles on small screens */
+    }
+
+    .chat-input-area {
+        padding: 10px;
+    }
+
+    #user-input {
+        padding: 10px 15px;
+    }
+    
+    .chat-input-area button {
+        width: 40px;
+        height: 40px;
+    }
 }

static/css/homeStyle.css

@@ -32,6 +32,7 @@ body {
                       url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><path fill="%23172a46" fill-opacity="0.3" d="M0 0 H40 V40 H0 Z M20 0 V40 M0 20 H40"></path></svg>');
     background-size: 40px 40px;
     background-repeat: repeat;
+    overflow-x: hidden; /* Prevent horizontal scroll on small devices */
 }
 
 a {
@@ -45,10 +46,10 @@ a:hover {
 }
 
 /* ===================================================================
-   Header & Navigation
+   Header & Navigation (Responsive)
    ================================================================= */
 header {
-    background-color: rgba(10, 25, 47, 0.85);
+    background-color: rgba(10, 25, 47, 0.95); /* Slightly more opaque for mobile readability */
     box-shadow: 0 2px 8px rgba(0,0,0,0.3);
     padding: 1rem 5%;
     backdrop-filter: blur(10px);
@@ -64,6 +65,7 @@ nav {
     align-items: center;
     max-width: 1200px;
     margin: 0 auto;
+    flex-wrap: wrap; /* Allows items to wrap on small screens */
 }
 
 .logo {
@@ -77,6 +79,8 @@ nav ul {
     list-style: none;
     display: flex;
     gap: 1.5rem;
+    margin: 0;
+    padding: 0;
 }
 
 nav a {
@@ -84,6 +88,7 @@ nav a {
     font-weight: 500;
     transition: color 0.3s;
     padding: 0.5rem 0;
+    display: inline-block;
 }
 
 nav a:hover, nav a.active {
@@ -91,13 +96,38 @@ nav a:hover, nav a.active {
     border-bottom: 2px solid var(--accent-primary);
 }
 
+/* --- Mobile Navigation Adjustments --- */
+@media (max-width: 768px) {
+    header {
+        padding: 1rem;
+    }
+
+    nav {
+        flex-direction: column;
+        gap: 1rem;
+    }
+
+    nav ul {
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 1rem;
+        width: 100%;
+    }
+
+    nav a {
+        font-size: 0.9rem;
+        padding: 0.25rem 0;
+    }
+}
+
 /* ===================================================================
    Main Content & Hero
    ================================================================= */
 main {
     padding: 2rem 5%;
-    max-width: 900px;
-    margin: 2rem auto;
+    max-width: 1000px; /* Slightly wider for better desktop use */
+    margin: 0 auto;
+    width: 100%;
 }
 
 .hero {
@@ -107,6 +137,7 @@ main {
     border-radius: 8px;
     box-shadow: var(--card-shadow);
     border: 1px solid var(--border-color);
+    margin-bottom: 2rem;
 }
 
 .hero h1 {
@@ -114,6 +145,7 @@ main {
     color: var(--text-bright);
     font-size: 2.5rem;
     font-weight: 600;
+    line-height: 1.2;
 }
 
 .hero p {
@@ -122,6 +154,26 @@ main {
     margin-bottom: 2rem;
 }
 
+/* --- Mobile Hero Adjustments --- */
+@media (max-width: 600px) {
+    main {
+        padding: 1rem;
+    }
+    
+    .hero {
+        padding: 1.5rem 1rem;
+    }
+
+    .hero h1 {
+        font-size: 1.8rem;
+    }
+
+    .hero p {
+        font-size: 1rem;
+        margin-bottom: 1.5rem;
+    }
+}
+
 /* ===================================================================
    Prediction Form
    ================================================================= */
@@ -137,8 +189,10 @@ main {
     border-radius: 8px;
     padding: 1.5rem;
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    /* Responsive Grid: Stacks on mobile, auto-fits on desktop */
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
     gap: 1.25rem;
+    width: 100%;
 }
 
 #drug-search-form legend {
@@ -152,12 +206,13 @@ main {
 #drug-search-form div {
     display: flex;
     flex-direction: column;
+    position: relative; /* Ensure relative positioning for child absolute elements */
 }
 
 #drug-search-form label {
     font-size: 0.9rem;
     color: var(--text-normal);
-    margin-bottom: 0.25rem;
+    margin-bottom: 0.35rem;
     font-weight: 500;
 }
 
@@ -167,10 +222,20 @@ main {
     padding: 0.75rem;
     border: 1px solid var(--border-color);
     border-radius: 4px;
-    font-size: 1rem;
+    font-size: 1rem; /* 16px to prevent iOS zoom */
     background-color: var(--bg-light-dark);
     color: var(--text-bright);
     transition: border-color 0.3s, box-shadow 0.3s;
+    appearance: none; /* Removes default OS styling for cleaner look */
+}
+
+/* Fix for Select arrow in some browsers */
+#drug-search-form select {
+    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ccd6f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
+    background-repeat: no-repeat;
+    background-position: right 1rem center;
+    background-size: 1em;
+    padding-right: 2.5rem; 
 }
 
 #drug-search-form input:focus, 
@@ -187,10 +252,11 @@ main {
 /* --- Autocomplete --- */
 .autocomplete-container {
     position: relative;
+    width: 100%;
 }
 
 .suggestions-box {
-    display: none; /* Hidden by default */
+    display: none; 
     position: absolute;
     top: 100%;
     left: 0;
@@ -202,13 +268,19 @@ main {
     max-height: 200px;
     overflow-y: auto;
     z-index: 100;
+    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
 }
 
 .suggestion-item {
-    padding: 10px;
+    padding: 12px 10px; /* Larger tap target for mobile */
     color: var(--text-normal);
     cursor: pointer;
     transition: background-color 0.2s;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.suggestion-item:last-child {
+    border-bottom: none;
 }
 
 .suggestion-item:hover {
@@ -218,16 +290,20 @@ main {
 
 /* --- Submit Button --- */
 button[type="submit"] {
-    padding: 0.75rem 1.5rem;
+    padding: 1rem 1.5rem; /* Larger touch target */
     background-color: var(--accent-primary);
     color: var(--accent-primary-text);
     border: none;
     border-radius: 4px;
-    font-size: 1rem;
+    font-size: 1.1rem;
     font-weight: bold;
     letter-spacing: 0.5px;
     cursor: pointer;
     transition: background-color 0.3s, transform 0.2s;
+    width: 100%; /* Full width on mobile/default */
+    max-width: 300px; /* Restricted width on desktop */
+    align-self: center; /* Center the button */
+    margin-top: 1rem;
 }
 
 button[type="submit"]:hover {
@@ -236,12 +312,20 @@ button[type="submit"]:hover {
     box-shadow: 0 4px 10px rgba(100, 255, 218, 0.1);
 }
 
+/* Mobile Fieldset adjustment */
+@media (max-width: 480px) {
+    #drug-search-form fieldset {
+        grid-template-columns: 1fr; /* Force single column on very small screens */
+        padding: 1rem;
+    }
+}
+
 /* ===================================================================
    Results Section
    ================================================================= */
 .results-container {
     display: grid;
-    grid-template-columns: 1fr; /* Default to 1 column */
+    grid-template-columns: 1fr; /* Default stack */
     gap: 2rem;
     margin-top: 2.5rem;
     padding: 2.5rem;
@@ -251,13 +335,21 @@ button[type="submit"]:hover {
     border: 1px solid var(--border-color);
 }
 
-/* Use 2 columns on larger screens */
+/* 2 columns on tablets and up */
 @media (min-width: 768px) {
     .results-container {
         grid-template-columns: 1fr 1fr;
     }
 }
 
+/* Adjust padding on mobile */
+@media (max-width: 600px) {
+    .results-container {
+        padding: 1.5rem;
+        margin-top: 1.5rem;
+    }
+}
+
 .results-container.hidden {
     display: none;
 }
@@ -279,9 +371,10 @@ button[type="submit"]:hover {
 
 #risk-profile-list li,
 #side-effects-list li {
-    margin-bottom: 0.5rem;
+    margin-bottom: 0.75rem; /* More space for readability */
     position: relative;
     padding-left: 1.5rem;
+    line-height: 1.5;
 }
 
 /* Custom bullet point */
@@ -292,77 +385,7 @@ button[type="submit"]:hover {
     left: 0;
     color: var(--accent-primary);
     font-weight: bold;
-}
-
-/* ===================================================================
-   Profile Page Styles (For compatibility with profile.html)
-   ================================================================= */
-.profile-container {
-    display: flex;
-    flex-direction: column;
-    gap: 2rem;
-}
-
-.profile-card, .search-history {
-    background-color: var(--bg-medium-dark);
-    padding: 2.5rem;
-    border-radius: 8px;
-    box-shadow: var(--card-shadow);
-    border: 1px solid var(--border-color);
-}
-
-.profile-card {
-    text-align: center;
-}
-
-.avatar {
-    width: 100px;
-    height: 100px;
-    border-radius: 50%;
-    margin-bottom: 1rem;
-    border: 3px solid var(--accent-primary);
-    box-shadow: 0 0 15px rgba(100, 255, 218, 0.3);
-}
-
-.profile-card h2 {
-    color: var(--text-bright);
-    font-size: 1.75rem;
-}
-
-.profile-card p {
-    color: var(--text-normal);
-    font-size: 1.1rem;
-}
-
-.profile-card p strong {
-    color: var(--accent-primary);
-    font-weight: 500;
-}
-
-.search-history h3 {
-    color: var(--accent-primary);
-    margin-bottom: 1rem;
-    border-bottom: 1px solid var(--border-color);
-    padding-bottom: 0.75rem;
-}
-
-.search-history ul {
-    list-style: none;
-    padding: 0;
-}
-
-.search-history li {
-    background-color: var(--bg-light-dark);
-    padding: 0.75rem 1rem;
-    border-radius: 4px;
-    margin-bottom: 0.5rem;
-    color: var(--text-normal);
-    border-left: 4px solid var(--accent-primary);
-    transition: background-color 0.3s;
-}
-
-.search-history li:hover {
-    background-color: var(--border-color);
+    top: -2px;
 }
 
 /* ===================================================================

static/css/profileStyle.css

@@ -0,0 +1,273 @@
+/* ===================================================================
+   1. GLOBAL VARIABLES & RESET
+   ================================================================= */
+:root {
+    --bg-deep-dark: #0a192f;
+    --bg-medium-dark: #172a46;
+    --bg-light-dark: #2c3e50;
+    --text-bright: #ccd6f6;
+    --text-normal: #bdc3c7;
+    --text-muted: #8892b0;
+    --accent-primary: #64ffda;
+    --accent-primary-darker: #52d3b4;
+    --accent-primary-text: #0a192f;
+    --border-color: #304a6e;
+    --card-shadow: 0 10px 30px -15px rgba(2, 12, 27, 0.7);
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    background-color: var(--bg-deep-dark);
+    color: var(--text-normal);
+    line-height: 1.6;
+    font-size: 16px;
+    background-image: linear-gradient(rgba(10, 25, 47, 0.9), rgba(10, 25, 47, 0.9)),
+                      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><path fill="%23172a46" fill-opacity="0.3" d="M0 0 H40 V40 H0 Z M20 0 V40 M0 20 H40"></path></svg>');
+    background-size: 40px 40px;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+a {
+    text-decoration: none;
+    color: inherit;
+    transition: color 0.3s;
+}
+
+/* ===================================================================
+   2. HEADER & NAVIGATION (Responsive)
+   ================================================================= */
+header {
+    background-color: rgba(10, 25, 47, 0.95);
+    padding: 1rem 5%;
+    border-bottom: 1px solid var(--border-color);
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+    backdrop-filter: blur(10px);
+}
+
+nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    max-width: 1200px;
+    margin: 0 auto;
+    flex-wrap: wrap;
+}
+
+.logo {
+    font-size: 1.5rem;
+    font-weight: bold;
+    color: var(--accent-primary);
+    letter-spacing: 1px;
+}
+
+nav ul {
+    list-style: none;
+    display: flex;
+    gap: 1.5rem;
+}
+
+nav a {
+    color: var(--text-normal);
+    font-weight: 500;
+    padding: 0.5rem 0;
+    font-size: 0.95rem;
+}
+
+nav a:hover, nav a.active {
+    color: var(--accent-primary);
+    border-bottom: 2px solid var(--accent-primary);
+}
+
+/* ===================================================================
+   3. MAIN CONTENT LAYOUT
+   ================================================================= */
+main {
+    flex: 1; /* Pushes footer down */
+    width: 100%;
+    max-width: 1100px;
+    margin: 2rem auto;
+    padding: 0 5%;
+}
+
+.profile-container {
+    display: grid;
+    /* Desktop: 1/3 width for Profile, 2/3 for History */
+    grid-template-columns: 1fr 2fr; 
+    gap: 2rem;
+    align-items: start;
+}
+
+/* ===================================================================
+   4. PROFILE CARD
+   ================================================================= */
+.profile-card {
+    background-color: var(--bg-medium-dark);
+    padding: 2.5rem;
+    border-radius: 12px;
+    box-shadow: var(--card-shadow);
+    border: 1px solid var(--border-color);
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.avatar {
+    width: 120px;
+    height: 120px;
+    border-radius: 50%;
+    object-fit: cover;
+    margin-bottom: 1.5rem;
+    border: 3px solid var(--accent-primary);
+    box-shadow: 0 0 20px rgba(100, 255, 218, 0.2);
+    background-color: var(--bg-light-dark);
+}
+
+.profile-card h2 {
+    color: var(--text-bright);
+    font-size: 1.5rem;
+    margin-bottom: 0.5rem;
+}
+
+.profile-card p {
+    color: var(--text-muted);
+    font-size: 1rem;
+    margin-bottom: 0.5rem;
+    width: 100%;
+    word-break: break-word; /* Prevents long emails from breaking layout */
+}
+
+.profile-card strong {
+    color: var(--accent-primary);
+    font-weight: 500;
+}
+
+/* ===================================================================
+   5. SEARCH HISTORY
+   ================================================================= */
+.search-history {
+    background-color: var(--bg-medium-dark);
+    padding: 2.5rem;
+    border-radius: 12px;
+    box-shadow: var(--card-shadow);
+    border: 1px solid var(--border-color);
+    min-height: 400px; /* Ensures visual balance */
+}
+
+.search-history h3 {
+    color: var(--text-bright);
+    margin-bottom: 1.5rem;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid var(--border-color);
+    font-size: 1.25rem;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.search-history ul {
+    list-style: none;
+    padding: 0;
+}
+
+.search-history li {
+    background-color: var(--bg-light-dark);
+    padding: 1rem 1.25rem;
+    border-radius: 6px;
+    margin-bottom: 0.75rem;
+    color: var(--text-normal);
+    border-left: 3px solid var(--accent-primary);
+    transition: transform 0.2s, background-color 0.2s;
+    font-size: 0.95rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.search-history li:hover {
+    background-color: rgba(255, 255, 255, 0.05);
+    transform: translateX(5px);
+}
+
+/* ===================================================================
+   6. RESPONSIVE MEDIA QUERIES
+   ================================================================= */
+
+/* Tablet (Portrait) & Mobile */
+@media (max-width: 900px) {
+    header {
+        padding: 1rem;
+    }
+
+    nav {
+        flex-direction: column;
+        gap: 1rem;
+    }
+
+    nav ul {
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 1rem;
+        width: 100%;
+    }
+
+    /* Switch to single column stack */
+    .profile-container {
+        grid-template-columns: 1fr;
+        gap: 1.5rem;
+    }
+
+    .profile-card, .search-history {
+        padding: 2rem;
+        min-height: auto;
+    }
+}
+
+/* Mobile Phones */
+@media (max-width: 600px) {
+    main {
+        padding: 0 1rem;
+        margin-top: 1.5rem;
+    }
+
+    .avatar {
+        width: 100px;
+        height: 100px;
+    }
+
+    .profile-card h2 {
+        font-size: 1.25rem;
+    }
+
+    .search-history h3 {
+        font-size: 1.1rem;
+    }
+
+    .search-history li {
+        padding: 0.75rem 1rem;
+        font-size: 0.9rem;
+    }
+}
+
+/* ===================================================================
+   7. FOOTER
+   ================================================================= */
+footer {
+    text-align: center;
+    padding: 2rem 5%;
+    margin-top: 3rem;
+    background-color: var(--bg-medium-dark);
+    color: var(--text-muted);
+    font-size: 0.9rem;
+    border-top: 1px solid var(--border-color);
+}

templates/profile.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>User Profile - MedScope</title>
-    <link rel="stylesheet" href="/static/css/homeStyle.css">
+    <link rel="stylesheet" href="/static/css/profileStyle.css">
 </head>
 <body>
     <header>