Update frontend/src/index.css

frontend/src/index.css

@@ -1,736 +0,0 @@
-/* frontend/src/index.css */
-/* Tailwind CSS directives - MUST be at the very top */
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-/* Define custom CSS Variables */
-:root {
-    --primary-color: #22c55e;
-    --background-color: #fff6d7;
-    --text-color: #333;
-    --white-color: #ffffff;
-    --border-color: #e5e7eb;
-    --green-button-bg: #4CAF50; /* Specific green for buttons */
-    --green-button-hover-bg: #45a049; /* Darker green on hover */
-    --dark-green-text: #0dba4b; /* Specific dark green for history/settings text */
-    --fontFamily: 'Inter', "Noto Sans", system-ui; /* Consolidated font families */
-    --header-height: 65px; /* Define a variable for consistent header height if it's fixed */
-}
-
-/* Global Styles for full-page layout and font-family */
-html, body, #root, .app-wrapper {
-    height: 100%;
-    margin: 0;
-    padding: 0;
-    overflow: hidden; /* Critical for entire page to prevent unwanted scrolling */
-}
-body {
-    font-family: var(--fontFamily), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    background-color: var(--white-color);
-    color: var(--text-color);
-}
-
-/* Hide scrollbar for webkit browsers */
-.hide-scrollbar::-webkit-scrollbar {
-    display: none;
-}
-/* For IE, Edge and Firefox */
-.hide-scrollbar {
-    -ms-overflow-style: none; /* IE and Edge */
-    scrollbar-width: none; /* Firefox */
-}
-
-/* --- App Wrapper (main application container) --- */
-.app-wrapper {
-    display: flex;
-    flex-direction: column;
-    height: 100%; /* Ensure app-wrapper takes full height */
-}
-
-/* New: Container for Sidebar and Chat Content */
-.content-area {
-    display: flex;
-    flex-grow: 1; /* Allows content-area to take up remaining vertical space */
-    /* Use calc to account for header height, as body has overflow:hidden */
-    height: calc(100% - var(--header-height));
-    overflow: hidden; /* Important to contain sidebar and chat and prevent this div from scrolling */
-}
-
-/* --- Header --- */
-.app-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 1rem 2rem;
-    background-color: var(--white-color);
-    border-bottom: 1px solid var(--border-color);
-    position: sticky;
-    top: 0;
-    z-index: 1000;
-    height: var(--header-height);
-    box-sizing: border-box;
-    flex-shrink: 0; /* Prevent header from shrinking */
-}
-.logo {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-}
-.logo img {
-    height: 40px;
-    width: auto;
-}
-.logo .brand-names {
-    display: flex;
-    flex-direction: column;
-    line-height: 1.2;
-}
-.logo .main-brand {
-    font-size: 1.8em;
-    font-weight: bold;
-    color: var(--text-color);
-}
-.logo .sub-brand {
-    font-size: 0.9em;
-    color: #777;
-}
-.app-header nav {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-}
-.app-header nav a {
-    text-decoration: none;
-    color: var(--text-color);
-    font-weight: 500;
-    transition: color 0.3s ease;
-}
-.app-header nav a:hover {
-    color: var(--primary-color);
-}
-
-/* Base button styles from root vars */
-.btn-primary {
-    background-color: var(--primary-color);
-    color: var(--white-color);
-    border: none;
-    padding: 0.5rem 1rem;
-    border-radius: 6px;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
-}
-.btn-primary:hover {
-    background-color: #1e9d4e;
-}
-
-/* Specific Green Text Link (for Login) */
-.link-green {
-    color: var(--green-button-bg) !important;
-    font-weight: 600;
-    transition: color 0.3s ease;
-}
-.link-green:hover {
-    color: var(--green-button-hover-bg) !important;
-}
-
-/* Specific Solid Green Button (for Sign Up and Logout in Header) */
-.btn-solid-green {
-    padding: 0.5rem 1rem;
-    border: none;
-    border-radius: 6px;
-    cursor: pointer;
-    font-size: 1em;
-    font-weight: 600;
-    text-align: center;
-    text-decoration: none;
-    display: inline-block;
-    box-sizing: border-box;
-    background-color: var(--green-button-bg);
-    color: var(--white-color) !important;
-    transition: background-color 0.3s ease, color 0.3s ease;
-}
-.btn-solid-green:hover {
-    background-color: var(--green-button-hover-bg);
-    color: var(--white-color) !important;
-}
-.btn-secondary {
-    background-color: transparent;
-    border: 1px solid var(--border-color);
-    color: var(--text-color);
-    padding: 0.5rem 1rem;
-    border-radius: 6px;
-    cursor: pointer;
-    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
-}
-.btn-secondary:hover {
-    background-color: #f0f0f0;
-    border-color: #c0c0c0;
-    color: #555;
-}
-
-/* --- Auth Forms --- */
-.auth-container { width: 100%; display: flex; justify-content: center; }
-.auth-form { width: 100%; max-width: 400px; padding: 2rem; }
-.auth-form h2 { text-align: center; margin-bottom: 2rem; }
-.form-group { margin-bottom: 1.5rem; }
-.form-group label { display: block; margin-bottom: 0.5rem; }
-.form-group input {
-    width: 100%;
-    padding: 0.75rem;
-    border: 1px solid var(--border-color);
-    border-radius: 6px;
-    background-color: #fafafa;
-    box-sizing: border-box;
-}
-.forgot-password { text-align: right; margin-bottom: 1rem; font-size: 0.9em;}
-.error-message { color: red; text-align: center; margin-bottom: 1rem; }
-.auth-form .btn-primary { width: 100%; padding: 0.75rem; }
-
-/* REMOVED: .chat-layout as it's no longer the main flex container for sidebar and chat */
-
-/* Sidebar Styling */
-.sidebar {
-    width: 260px;
-    background-color: #f9fafb;
-    padding: 1rem;
-    border-right: 1px solid var(--border-color);
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between; /* Pushes content to top and bottom */
-    flex-shrink: 0; /* Prevent sidebar from shrinking, CRITICAL for fixed sidebar */
-    height: 100%; /* Make sidebar take full height of content-area */
-    box-sizing: border-box;
-    overflow-y: auto; /* Allow sidebar content to scroll if it exceeds its height */
-    -ms-overflow-style: none;  /* IE and Edge */
-    scrollbar-width: none;  /* Firefox */
-}
-.sidebar::-webkit-scrollbar { /* Hide scrollbar for webkit browsers */
-    display: none;
-}
-
-
-/* sidebar-top now contains only the new chat button */
-.sidebar-top {
-    display: flex;
-    flex-direction: column;
-}
-
-/* New Chat Button Styling */
-.new-chat-btn {
-    width: 100%;
-    padding: 0.75rem;
-    border: none;
-    border-radius: 6px;
-    background-color: var(--dark-green-text);
-    color: var(--white-color);
-    cursor: pointer;
-    text-align: left;
-    font-weight: 500;
-    font-size: 1rem;
-    line-height: 1.5rem;
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    transition: background-color 0.3s ease;
-    margin-bottom: 1rem; /* Space below the button */
-}
-.new-chat-btn:hover {
-    background-color: var(--green-button-hover-bg);
-}
-.new-chat-btn .plus-icon {
-    font-size: 1.2rem;
-    font-weight: bold;
-}
-
-/* sidebar-bottom will contain the nav links and be pushed to the bottom */
-.sidebar-bottom {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-    margin-top: auto; /* This pushes the nav section to the bottom */
-}
-
-/* Styling for History and Settings links */
-.sidebar-nav-link {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 0.75rem;
-    text-decoration: none;
-    color: var(--dark-green-text);
-    border-radius: 6px;
-    background: transparent; /* Explicitly remove background */
-    border: none;
-    width: 100%;
-    font-weight: 500;
-    font-size: 1rem;
-    line-height: 1.5rem;
-    transition: background-color 0.3s ease, color 0.3s ease;
-}
-.sidebar-nav-link:hover {
-    background-color: transparent; /* Ensure no background on hover */
-    color: var(--green-button-hover-bg); /* Darker green on hover for text */
-}
-.sidebar-nav-link.active {
-    background-color: transparent; /* Ensure no background when active */
-    color: var(--dark-green-text); /* Keep dark green text when active */
-}
-
-/* New: Styling for the container that holds ChatInterface */
-.chat-content-container {
-    flex-grow: 1; /* Allows chat content to take all remaining width */
-    display: flex;
-    flex-direction: column;
-    background-color: #f9f9f9;
-    height: 100%; /* Ensures it takes full height of content-area */
-    box-sizing: border-box;
-}
-
-
-/* Main chat content area (now within chat-content-container) */
-.chat-main { /* This class is still relevant for ChatInterface's internal layout */
-    flex-grow: 1;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    height: 100%; /* Ensure it takes full height of its parent (.chat-content-container) */
-    box-sizing: border-box;
-}
-
-/* Chat Messages Area */
-.chat-messages {
-    flex-grow: 1; /* Allow messages to take available space and push input down */
-    overflow-y: auto; /* Enable scrolling for messages */
-    padding: 20px;
-    display: flex;
-    flex-direction: column;
-    gap: 15px; /* Spacing between message wrappers */
-}
-
-/* Empty Chat Placeholder */
-.empty-chat-placeholder {
-    text-align: center;
-    padding: 50px;
-    color: #666;
-    flex-grow: 1; /* Pushes content to the bottom if few messages */
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-}
-.empty-chat-placeholder h1 {
-    font-size: 2.5em;
-    margin-bottom: 10px;
-    color: #333;
-}
-.empty-chat-placeholder p {
-    font-size: 1.1em;
-    line-height: 1.6;
-}
-.no-history-message { /* New style for when history is empty */
-    text-align: center;
-    color: #999;
-    font-style: italic;
-    margin-top: 20px;
-}
-
-/* Message Wrapper (contains avatar and bubble) */
-.message-wrapper {
-    display: flex; /* Use flexbox for layout of avatar and bubble */
-    align-items: flex-start; /* Align items to the top */
-    max-width: 100%; /* Ensure it doesn't overflow */
-}
-
-/* Specific styles for user messages (align to right) */
-.message-wrapper.user {
-    justify-content: flex-end; /* Push user messages to the right */
-    flex-direction: row-reverse; /* Put avatar on the right for user */
-}
-
-/* Chat Avatar Styling */
-.chat-avatar {
-    font-size: 24px; /* Still useful for user emoji */
-    padding: 8px;
-    border-radius: 50%;
-    background-color: #e0e0e0; /* Default background for avatar circle */
-    min-width: 40px;
-    height: 40px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    /* Margins for spacing */
-    margin-right: 10px; /* Default for assistant avatar */
-    overflow: hidden; /* Crucial to clip image if it's larger than the circle */
-}
-
-/* Adjust margin for user avatar (since row-reverse) */
-.message-wrapper.user .chat-avatar {
-    margin-left: 10px;
-    margin-right: 0;
-}
-
-/* Style for the actual image inside the avatar div */
-.chat-avatar .avatar-image {
-    width: 100%; /* Make image fill the avatar div */
-    height: 100%; /* Make image fill the avatar div */
-    object-fit: cover; /* Crop and cover the area without distortion */
-    border-radius: 50%; /* Ensure the image itself is also rounded */
-}
-
-/* Message Bubble Styling */
-.message-bubble {
-    padding: 12px 18px;
-    border-radius: 20px;
-    max-width: 70%; /* Limit message width */
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    white-space: pre-wrap; /* This will make '\n' characters create new lines */
-    word-break: break-word; /* Ensure long words break within the bubble */
-    overflow-wrap: break-word; /* Modern equivalent */
-}
-
-/* Specific styling for assistant bubbles */
-.message-wrapper.assistant .message-bubble {
-    background-color: #DFE3E8; /* Assistant background color */
-    border-bottom-left-radius: 5px; /* Pointy bottom-left for assistant */
-    margin-right: auto; /* Push to left, next to sidebar */
-    color: var(--text-color); /* Default text color for assistant */
-}
-
-/* Specific styling for user bubbles */
-.message-wrapper.user .message-bubble {
-    background-color: #4CAF50; /* User background color: Green */
-    color: #ffffff; /* User text color: White */
-    border-bottom-right-radius: 5px; /* Pointy bottom-right for user */
-    margin-left: auto; /* Push to right */
-}
-
-/* Blinking Cursor */
-.blinking-cursor {
-    animation: blink 1s step-end infinite;
-    display: inline-block; /* Essential for it to be visible next to text */
-    width: 0.5em; /* Give it a small width */
-    background-color: var(--text-color);
-}
-@keyframes blink {
-    from, to { opacity: 1; }
-    50% { opacity: 0; }
-}
-
-/* Chat Input Area */
-.chat-input-area {
-    padding: 20px;
-    border-top: 1px solid #eee;
-    background-color: #fff;
-}
-.chat-form {
-    display: flex;
-    gap: 10px;
-}
-.chat-form input[type="text"] {
-    flex-grow: 1;
-    padding: 12px;
-    border: 1px solid #ccc;
-    border-radius: 25px;
-    font-size: 16px;
-    outline: none;
-    background-color: #fafafa;
-}
-.chat-form button {
-    padding: 12px 20px;
-    background-color: var(--primary-color);
-    color: var(--white-color);
-    border: none;
-    border-radius: 6px;
-    cursor: pointer;
-    font-size: 16px;
-    transition: background-color 0.2s;
-}
-.chat-form button:hover:not(:disabled) {
-    background-color: #1e9d4e;
-}
-.chat-form button:disabled {
-    background-color: #a0a0a0;
-    cursor: not-allowed;
-}
-
-/* Voice input specific styles */
-.voice-input-container {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-}
-.voice-record-btn {
-    padding: 0.5rem;
-    border-radius: 50%;
-    background-color: #ef4444; /* Red color for record button */
-    color: white;
-    border: none;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 40px; /* Make it a perfect circle */
-    height: 40px;
-    transition: background-color 0.2s;
-}
-.voice-record-btn:hover:not(:disabled) {
-    background-color: #dc2626; /* Darker red on hover */
-}
-.voice-record-btn.recording {
-    background-color: #f87171; /* Lighter red when recording */
-    animation: pulse 1.5s infinite; /* Add a pulse animation when recording */
-}
-@keyframes pulse {
-    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(248, 113, 113, 0.7); }
-    70% { transform: scale(1.1); box-shadow: 0 0 0 10px rgba(248, 113, 113, 0); }
-    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(248, 113, 113, 0); }
-}
-.sound-wave {
-    flex-grow: 1; /* Allow visualizer to take available space */
-    height: 40px; /* Adjust height as needed */
-    margin-left: 0.5rem;
-}
-
-/* --- History Page Styles --- */
-.history-title {
-    color: var(--text-color);
-    margin-bottom: 20px;
-    font-size: 24px;
-    padding: 0 20px;
-    margin-top: 20px;
-}
-.history-list {
-    list-style: none;
-    padding: 0 20px;
-}
-.history-item {
-    background-color: #fff;
-    border-radius: 8px;
-    padding: 15px 20px;
-    margin-bottom: 10px;
-    display: flex;
-    align-items: center;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-    cursor: pointer;
-    transition: background-color 0.2s ease-in-out;
-}
-.history-item:hover {
-    background-color: #e9ecef;
-}
-.history-icon {
-    font-size: 24px;
-    margin-right: 15px;
-}
-.history-details {
-    flex-grow: 1;
-}
-.history-prompt {
-    font-weight: bold;
-    color: #555;
-    margin-bottom: 5px;
-}
-.history-date {
-    font-size: 0.85em;
-    color: #888;
-}
-
-/* Conversation View Specific Styles */
-.conversation-view {
-    background-color: #fff;
-    border-radius: 8px;
-    padding: 20px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-}
-.back-button {
-    background-color: #007bff;
-    color: white;
-    border: none;
-    padding: 10px 15px;
-    border-radius: 5px;
-    cursor: pointer;
-    margin-bottom: 15px;
-    font-size: 16px;
-    transition: background-color 0.2s ease-in-out;
-}
-.back-button:hover {
-    background-color: #0056b3;
-}
-.conversation-title {
-    color: #333;
-    margin-bottom: 20px;
-    font-size: 20px;
-    border-bottom: 1px solid #eee;
-    padding-bottom: 10px;
-}
-.messages-list {
-    max-height: 500px; /* Limit height and enable scrolling for messages */
-    overflow-y: auto;
-    padding-right: 10px; /* For scrollbar spacing */
-    display: flex;
-    flex-direction: column;
-}
-.message-item {
-    margin-bottom: 15px;
-    padding: 10px 15px;
-    border-radius: 8px;
-    max-width: 80%;
-    clear: both; /* Good for floating elements, though flexbox often handles this */
-}
-.message-item.user {
-    background-color: #dcf8c6; /* Light green for user messages */
-    align-self: flex-end; /* Align to the right in a flex container */
-    margin-left: auto; /* Push to the right */
-}
-.message-item.chatbot { /* Using .chatbot from history.css, convert to .assistant where needed in JSX */
-    background-color: #e2e2e2; /* Light grey for chatbot messages */
-    align-self: flex-start; /* Align to the left */
-    margin-right: auto; /* Push to the left */
-}
-.message-sender {
-    font-weight: bold;
-    margin-bottom: 5px;
-    font-size: 0.9em;
-}
-.message-item.user .message-sender {
-    color: #3d8c1c; /* Darker green for user sender */
-}
-.message-item.chatbot .message-sender {
-    color: #555;
-}
-.message-content {
-    font-size: 1em;
-    line-height: 1.4;
-    word-wrap: break-word; /* Ensure long words wrap */
-    white-space: pre-wrap; /* Ensure newlines are respected in history view */
-}
-.message-timestamp {
-    font-size: 0.75em;
-    color: #999;
-    margin-top: 5px;
-    text-align: right;
-}
-
-/* Responsive adjustments */
-@media (max-width: 768px) {
-    .app-header {
-        flex-direction: column;
-        align-items: flex-start;
-        padding: 1rem;
-        gap: 10px;
-        height: auto; /* Allow header to expand if content wraps */
-    }
-    .app-header nav {
-        flex-wrap: wrap;
-        justify-content: center;
-        width: 100%;
-        gap: 10px;
-    }
-    .content-area { /* Adjust content area for mobile */
-        flex-direction: column;
-        height: calc(100% - var(--header-height));
-    }
-    .sidebar {
-        width: 100%;
-        border-right: none;
-        border-bottom: 1px solid var(--border-color);
-        padding: 10px;
-        flex-direction: row; /* Sidebar items in a row for mobile */
-        justify-content: space-around; /* Distribute items evenly */
-        align-items: center;
-        height: auto; /* Allow sidebar height to be determined by content */
-        overflow-x: auto; /* Allow horizontal scrolling if items overflow */
-        overflow-y: hidden; /* Hide sidebar vertical scrollbar on mobile */
-    }
-    .sidebar-top {
-        flex-direction: row; /* Align new chat button correctly */
-        align-items: center;
-        margin-bottom: 0; /* No margin-bottom on mobile to keep things compact */
-        flex-grow: 1; /* Allow to take space for justify-content */
-        justify-content: flex-start; /* Push new chat button to left */
-        gap: 10px; /* Space between new chat and nav */
-    }
-    .new-chat-btn {
-        width: auto;
-        font-size: 0.9em;
-        padding: 0.5rem 0.8rem;
-        margin-bottom: 0; /* Remove margin-bottom on mobile */
-    }
-    .sidebar-bottom {
-        margin-top: 0; /* Remove auto margin on mobile */
-        flex-direction: row; /* Nav links in a row */
-        gap: 10px;
-        flex-grow: 1; /* Allow sidebar-bottom to take space */
-        justify-content: flex-end; /* Push nav links to the right */
-    }
-    .sidebar-nav { /* Added this for mobile layout */
-        display: flex;
-        flex-direction: row;
-        gap: 10px;
-    }
-    .sidebar-nav-link {
-        padding: 0.5rem;
-        font-size: 0.9em;
-        flex-shrink: 0; /* Prevent links from shrinking too much */
-    }
-    .chat-main {
-        height: 100%; /* Take remaining height from parent chat-layout */
-        overflow-y: auto; /* Allow chat content to scroll */
-    }
-    .chat-messages {
-        padding: 1rem;
-    }
-    .message-bubble {
-        max-width: 85%;
-    }
-    .chat-input-area {
-        padding: 1rem;
-    }
-    /* Adjustments for voice input on mobile if needed */
-    .chat-form {
-        flex-wrap: wrap; /* Allow input and buttons to wrap if screen is very small */
-    }
-    .chat-form input {
-        width: 100%; /* Take full width */
-        margin-bottom: 0.5rem; /* Space below input if it wraps */
-    }
-    .chat-form button {
-        flex-grow: 1; /* Allow send button to take available space */
-    }
-    .voice-input-container {
-        width: 100%;
-        justify-content: center;
-    }
-    .voice-record-btn {
-        flex-shrink: 0;
-    }
-    .sound-wave {
-        flex-grow: 1;
-        max-width: calc(100% - 60px); /* Adjust based on button size */
-    }
-    /* Mobile adjustments for History Page */
-    .history-title {
-        padding: 0 1rem;
-    }
-    .history-list {
-        padding: 0 1rem;
-    }
-    .history-item {
-        flex-direction: column; /* Stack details vertically on mobile */
-        align-items: flex-start;
-        padding: 0.8rem;
-    }
-    .history-details {
-        width: 100%; /* Take full width when stacked */
-    }
-    .history-icon {
-        margin-right: 0;
-        margin-bottom: 0.5rem; /* Space below icon */
-    }
-    .history-date {
-        text-align: left; /* Align date to left when stacked */
-    }
-}