/* General Body Styles */
body {
    font-family: 'Inter', sans-serif;
    background-color: #f8fafc;
    color: #334155;
    margin: 0;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    /*padding-right: 9.75rem;*/ /* 2.75*3 + 0.5*2 + 0.5 = 9.75 */
}

/* Main Container */
.container {
    width: 100%;
    max-width: 1200px; /* CHANGED: Increased from 900px */
    padding: 2rem 1.5rem;
    box-sizing: border-box;
}

/* Header */

/* Header */
header {
    position: relative; /* For language toggle positioning */
}



header h1 {
    font-size: 2.5rem;
    font-weight: 800;
    color: #1e3a8a;
    text-align: center;
    margin-bottom: 1rem;
}

/* --- MODIFIED: Language Toggle to Header Controls --- */
.header-controls {
    /* MODIFICATION: Mobile-first: static layout */
    width: 100%;
    position: static; 
    display: flex;
    justify-content: flex-end; /* Center horizontally */
    align-items: center; /* NEW: Align items vertically */
    gap: 0.75rem; /* NEW: Space between buttons */
    margin-bottom: 1rem;
    margin-right: 1rem; /* NEW: Space from right edge */
}
/* NEW: Style for the text link */
.header-contact-link {
    /* font-size: 0.875rem; <-- REMOVED */
    font-weight: 600;
    /* color: #475569; <-- REMOVED */
    text-decoration: none;
    /* padding: 0.5rem; <-- REMOVED */
    border-radius: 8px; /* MODIFIED */
    transition: all 0.2s;

    /* --- NEW STYLES (Copied from #lang-toggle-btn) --- */
    background-color: #eef2ff;
    border: 1px solid #c7d2fe;
    color: #312e81;
    padding: 0.30rem 1rem;
    cursor: pointer; /* Added for button-like feel */
}
.header-contact-link:hover {
    /* background-color: #f1f5f9; <-- REMOVED */
    /* color: #1e293b; <-- REMOVED */
    background-color: #e0e7ff; /* NEW: Copied from #lang-toggle-btn:hover */
}

.header-contact-link .icon {
  /* Set your desired size */
  width: 20px;
  height: 20px;

  /* Your icon path data has fill colors set on it (e.g., fill="#FFFFFF").
    If you want to control the color with CSS, you would need to 
    remove the 'fill' attributes from the <path> tags in your HTML
    and then use this CSS property:
  */
  /* fill: #333; */ /* This will color the SVG parts that don't have a fill set */
}

#lang-toggle-btn {
    background-color: #eef2ff;
    border: 1px solid #c7d2fe;
    color: #312e81;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
#lang-toggle-btn:hover {
    background-color: #e0e7ff;
}
/* On desktop, move it to the top right */
/* @media (min-width: 1024px) {
    .header-controls {
        position: absolute;
        top: 0.5rem;
        right: 0;
        margin-bottom: 0.5rem;
    }
} */
/* --- End Header Controls --- */

/* Navigation Links */
.main-nav {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2.5rem;
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 1rem;
}

.nav-link {
    padding: 0.5rem 1rem;
    font-weight: 600;
    color: #4b5563;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.2s ease-in-out;
}

.nav-link:hover {
    background-color: #eef2ff;
    color: #3730a3;
}

.nav-link.active {
    background-color: #e0e7ff;
    color: #312e81;
    font-weight: 700;
}


/* Q&A Form */
.qa-form, .search-form {
    max-width: 900px; /* Constrain form width */
    margin: 0 auto 2rem auto; /* Center the form */
    /* *** MODIFICATION: Removed visual styles *** */
    /* background-color: #ffffff; */
    /* border-radius: 12px; */
    /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); */
    /* padding: 0; */
    /* border: none; */
    width: 100%; /* Full width of container */
}

.input-wrapper {
    /* *** MODIFICATION: Use position: relative *** */
    position: relative;
    /* display: flex; <-- REMOVED */
    /* align-items: flex-end; <-- REMOVED */
    /* flex-wrap: nowrap; <-- REMOVED */
    /* gap: 0.5rem; <-- REMOVED */
    
    /* MODIFIED: Styles moved from qa-form */
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
    /* *** MODIFICATION: Add padding to the wrapper *** */
    padding: 0; /* Remove wrapper padding, textareas will have their own */
}

/* MODIFIED: Styles for <textarea> */
#query-input {
    /* flex-grow: 1; <-- REMOVED */
    border: none;
    background: transparent; /* <-- MODIFIED: transparent background */
    /* *** MODIFICATION: Add padding for buttons *** */
    padding: 1rem; /* Base padding */
    padding-bottom: 3.5rem; /* 56px: Room for buttons + padding */
    font-size: 1rem;
    color: #1e293b;
    outline: none;
    resize: none;
    overflow-y: auto; /* Show scrollbar when max-height is reached */
    line-height: 1.5;
    min-height: 50px; /* 36px button + 1rem*2 padding */
    max-height: 130px; 
    box-sizing: border-box; 
    width: 100%; /* Fill wrapper */
}


#query-input::placeholder {
    font-size: 0.9rem;
    color: #94a3b8;
/* gap: 0.5rem; <-- REMOVED */
}

#search-query-input::placeholder {
    font-size: 0.9rem;
    color: #94a3b8;
}

/* NEW: Button container */
/* .textarea-buttons { <-- REMOVED, using .button-group */
/* } */

/* *** NEW: Style for the .button-group *** */
.textarea-buttons {
    /* *** MODIFICATION: Use absolute positioning *** */
    position: absolute;
    bottom: 0.75rem; /* 12px */
    right: 0.75rem; /* 12px */

    display: flex;
    gap: 0.5rem;
    flex-shrink: 0; /* Prevent buttons from shrinking */
}


/* These group the buttons on each side */
.button-group-left {
  display: flex;
  align-items: center;
  gap: 8px; /* Space between buttons */
}
/* --- *** NEW: Microphone Button Style *** --- */
.mic-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #3b82f6; /* blue-500 */
    color: white;
    border: none;
    border-radius: 8px;
    width: 36px; /* MODIFIED: Make all buttons same size */
    height: 36px; /* MODIFIED: Make all buttons same size */
    cursor: pointer;
    transition: background-color 0.2s;
    flex-shrink: 0;
}
.mic-btn:hover {
    background-color: #2563eb; /* blue-600 */
    transform: translateY(-1px);
}
.mic-btn svg {
    width: 1.25rem; /* 20px */
    height: 1.25rem;
}
/* NEW: Listening animation */
@keyframes pulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
    70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}
.mic-btn.is-listening {
    background-color: #ef4444; /* red-500 */
    animation: pulse 1.5s infinite;
}


/* --- MODIFICATION: Styling for the new standalone clear button --- */
.clear-btn {
    display: flex; /* Kept from previous */
    align-items: center;
    justify-content: center;
    background-color: #abaaaa; /* Red-500 */
    color: rgb(5, 5, 5);
    border: none;
    border-radius: 8px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    transition: background-color 0.2s;
    flex-shrink: 0;
}
.clear-btn:hover {
    background-color: #434343; /* Red-600 */
    color: white;
    transform: translateY(-1px);
}
.clear-btn svg {
    width: 1rem; /* 16px */
    height: 1rem;
}
.hidden {
    display: none !important;
}
/* --- End of Clear Button Styles --- */


.submit-btn {
    background-color: #4772f4;
    color: white;
    border: none;
    border-radius: 8px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s;
    flex-shrink: 0;
}

.submit-btn:hover {
    background-color: #1d4ed8;
}

/* --- NEW: Stop Button Styles --- */
.stop-btn {
    background-color: #4772f4;
    color: rgb(209, 131, 131);
    border: none;
    border-radius: 8px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s;
    flex-shrink: 0;
}
.stop-btn:hover {
    background-color: #1d4ed8;
}
.stop-icon {
    width: 1.25rem; /* 20px */
    height: 1.25rem;
    animation: pulse-stop 1.5s infinite; /* Loading animation */
}
@keyframes pulse-stop {
    0% { opacity: 1; }
    50% { opacity: 0.6; }
    100% { opacity: 1; }
}

/* --- NEW: Logic for hiding/showing submit/stop --- */
/* When loading, hide submit icon */
.qa-form.is-loading .submit-btn,
.search-form.is-loading .submit-btn {
    display: none;
}

/* When not loading, hide stop icon */
.qa-form:not(.is-loading) .stop-btn,
.search-form:not(.is-loading) .stop-btn {
    display: none;
}
/* --- END NEW --- */


/* --- NEW: Filter Button Style --- */
.filter-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent; /* No background */
    color: #475569; /* slate-600 */
    border: none;
    border-radius: 8px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}
.filter-btn:hover {
    background-color: #f1f5f9; /* slate-100 */
    color: #1e3a8a; /* blue-900 */
    transform: translateY(-1px);
}
.filter-btn.active {
    background-color: #e0e7ff; /* indigo-100 */
    color: #3730a3; /* indigo-800 */
}
.filter-btn svg {
    width: 1.125rem; /* 18px */
    height: 1.125rem;
}
/* --- END Filter Button Style --- */


/* --- NEW: Q&A Filter Panel Styles --- */
.qa-filter-panel {
    max-width: 900px;
    margin: -1rem auto 2rem auto; /* Center below form, negative margin to attach */
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-top: none; /* Attach to form */
    border-radius: 0 0 12px 12px; /* Rounded bottom */
    padding: 1rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    animation: slide-down 0.3s ease-out;
    z-index: 5; /* Sit behind input wrapper's shadow */
    position: relative;
}

.qa-filter-panel .filter-controls {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.qa-filter-panel .date-filter-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.qa-filter-panel .date-filter-group label {
    font-weight: 600;
    color: #475569;
    flex-basis: 50px; /* Give labels a fixed width */
}
.qa-filter-panel .date-filter-group input[type="date"] {
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    color: #1e293b;
    flex-grow: 1;
}

.filter-clear-btn {
    background-color: #f1f5f9; /* slate-100 */
    color: #475569; /* slate-600 */
    border: 1px solid #e2e8f0; /* slate-200 */
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    max-width: 150px;
    align-self: flex-end; /* Align to the right */
}
.filter-clear-btn:hover {
    background-color: #e2e8f0; /* slate-200 */
}

/* Tablet/Desktop styles for QA filter */
@media (min-width: 600px) {
    .qa-filter-panel {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    .qa-filter-panel .filter-controls {
        flex-direction: row;
        flex-grow: 1;
        gap: 1.5rem;
    }
    .qa-filter-panel .date-filter-group {
        flex-grow: 1;
    }
    .filter-clear-btn {
        align-self: center;
        flex-shrink: 0;
    }
}

@keyframes slide-down {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* --- END Q&A Filter Styles --- */



/* .tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 80px;
  background-color: rgb(78, 92, 248);
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
} */
.tooltip {
  position: relative;
  display: inline-block;
}

/* *** MODIFIED: Re-styled tooltip to match Gemini *** */
.tooltip .tooltiptext {
  visibility: hidden;
  background-color: #333; /* Dark background */
  color: #fff; /* White text */
  text-align: center;
  border-radius: 6px;
  padding: 5px 8px; /* Compact padding */
  position: absolute;
  z-index: 1002; /* Ensure it's on top */
  
  /* Position above the button */
  bottom: -100%; 
  left: 50%;
  transform: translateX(-50%); /* Center the tooltip */

  opacity: 0;
  transition: opacity 0.2s;
  font-size: 0.8rem;
  font-weight: 500;
  white-space: nowrap; /* Prevent line breaks */
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}


/* --- NEW: Wrapper for search input + buttons (Row 1) --- */
.search-form .input-wrapper {
    /* *** MODIFICATION: Use position: relative *** */
    position: relative;
    /* display: flex; <-- REMOVED */
    /* align-items: flex-end; <-- REMOVED */
    /* flex-wrap: nowrap; <-- REMOVED */
    /* gap: 0.5rem; <-- REMOVED */
    flex-grow: 1;
    /* *** ADDED: Visual styles from .search-form *** */
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    padding: 0; /* Remove wrapper padding */
    border: 1px solid #e2e8f0;
}

/* NEW: Row 1 wrapper */
/* .search-main-row { <-- REMOVED, .input-wrapper is the new row 1 */
/* display: flex; */
/* align-items: center; */
/* gap: 0.5rem; */
/* } */

/* MODIFICATION: Search input no longer has padding-right */
#search-query-input {
    /* border: 1px solid #2671cc; <-- REMOVED, wrapper has border */
    border: none;
    background: transparent; /* <-- MODIFIED: transparent background */
    border-radius: 0;
    /* *** MODIFICATION: Add padding for buttons *** */
    padding: 1rem; /* Base padding */
    padding-bottom: 3.5rem; /* 56px: Room for buttons + padding */
    font-size: 1rem;
    color: #1e293b;
    outline: none;
    /* flex-grow: 1; <-- REMOVED */
    overflow-y: auto; /* Show scrollbar when max-height is reached */
    line-height: 1.5;
    min-height: 50px; /* 36px button + 1rem*2 padding */
    max-height: 130px; 
    box-sizing: border-box; 
    width: 100%;
    resize: none;
}

/* Wrapper for filter and sort controls (Row 2) */
.filter-sort-group {
    display: flex;
    flex-direction: column; /* Stack on mobile */
    gap: 1rem;
}

.filter-controls {
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
    flex-wrap: wrap;
    /* justify-content: space-between; */
    flex-direction: column; /* Stack on mobile */
}

/* NEW: Style for the individual date [Label] + [Input] groups */
.date-filter-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.date-filter-group label {
    font-weight: 600;
    color: #475569;
    flex-shrink: 0; /* Prevent label from shrinking */
}

.filter-controls label {
    font-weight: 600;
    color: #475569;
}

.filter-controls input[type="date"] {
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    color: #1e293b;
    flex-grow: 1; /* Allow date inputs to grow */
}

.sort-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: flex-start; /* Align to start on mobile */
}
.sort-controls label {
    font-weight: 600;
    color: #475569;
    font-size: 0.9rem;
}
.sort-controls select {
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    color: #1e293b;
    background-color: white;
    flex-grow: 1; /* Allow select to grow */
    max-width: 180px; /* Prevent it from getting too wide */
}

/* --- NEW: Container for search form buttons --- */
/* .form-actions { <-- REMOVED, buttons are in .button-group */
/* } */

/* --- NEW: Button group for search form --- */
.search-form .button-group {
    /* *** MODIFICATION: Use absolute positioning *** */
    position: absolute;
    bottom: 0.75rem; /* 12px */
    right: 0.75rem; /* 12px */
    /* transform: none; <-- REMOVED */
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}




/* @media (min-width: 768px) {
    .search-form {
        flex-direction: row;
        align-items: center;
    }
    .filter-controls {
        flex-grow: 1; 
        justify-content: center; 
    }
    .form-actions {
        flex-grow: 0;
    }
} */

@media (min-width: 768px) {
    /* Row 2 (filter-sort-group) settings for desktop */
    .filter-sort-group {
        flex-direction: row; /* Layout side-by-side on desktop */
        align-items: center;
        gap: 1rem;
        justify-content: space-between; /* Space out date/sort groups */
    }
    /* .filter-controls {
        flex-grow: 0;
        justify-content: flex-end;
        gap: 0.5rem;
        align-items: center;
    } */
    
    /* MODIFIED: Revert filter-controls to horizontal on desktop */
    .filter-controls {
        flex-direction: row;
        align-items: center;
        gap: 0.75rem;
        flex-grow: 1; /* Allow date pickers to take some space */
    }

    .filter-controls label {
        flex-shrink: 0;
    }
    .filter-controls input[type="date"] {
        flex-grow: 0;
        max-width: 140px;
    }
    .sort-controls {
        flex-grow: 0; /* Don't grow */
        justify-content: flex-start;
        align-items: center;
    }
}


/* --- NEW: Top Suggestions --- */
.suggestions-container {
    max-width: 900px;
    margin: -1.5rem auto 2rem auto; /* Pull up below form */
    padding: 0 0.5rem;
}
.suggestions-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: 0.5rem;
}
.suggestions-list {
    display: grid;
    flex-wrap: wrap;
    grid-template-columns: 1fr; /* 1 column on mobile by default */
    gap: 0.5rem;
}
.suggestion-btn {
    background-color: #f1f5f9;
    color: #334155;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    /* NEW: Make buttons fill the column */
    width: 100%;
    text-align: left;
    box-sizing: border-box;
}
.suggestion-btn:hover {
    background-color: #e2e8f0;
    border-color: #cbd5e1;
}
/* NEW: Media query for 2-column suggestions on desktop */
@media (min-width: 768px) {
    .suggestions-list {
        grid-template-columns: 1fr 1fr; /* 2 columns on desktop */
        gap: 0.75rem;
    }
}
/* --- END Suggestions --- */


/* --- NEW: Styles for Q&A page results area --- */
.results-area {
    display: grid;
    grid-template-columns: 1fr; /* Default to 1 column for mobile */
    gap: 1.5rem;
    align-items: start;
}

/* Use a media query to apply 2-column layout on wider screens */
@media (min-width: 1024px) {  /* CHANGED: Breakpoint from 768px to 1024px */
    .results-area {
        /* Answer gets 2/3, References get 1/3 */
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); 
    }
}


/* Answer Styling */
#answer {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 1.5rem 2.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
    line-height: 1.7;
    font-size: 1rem;
    color: #1e293b;
    /* margin-bottom: 2rem; <-- Removed, gap is handled by grid */
    min-height: 100px;
    /* overflow: hidden;  */
    overflow-wrap: break-word;
    max-width: 100%; /* Ensure it doesn't overflow its container */
    width: 100%; /* Fill container */
    box-sizing: border-box;
}


/* --- NEW: Animation classes for answer reveal --- */
/* #answer .reveal-me {
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

#answer .reveal-me.revealed {
    opacity: 1;
    transform: translateY(0);
}
--- End of animation classes --- */

#answer #loading-indicator {
    padding: 2rem 0;
}


#answer h2 {
    font-size: 1.5rem;
    color: #1e3a8a;
    border-bottom: 2px solid #eef2ff;
    padding-bottom: 0.5rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

#answer h3 {
    font-size: 1.25rem;
    color: #1e3a8a;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

#answer ul, #answer ol {
    padding-left: 25px;
    margin-bottom: 1rem;
}

#answer li {
    margin-bottom: 0.5rem;
}

#answer p {
    margin-bottom: 1rem;
    text-align: justify;
}

#answer strong {
    font-weight: 600;
    color: #1e293b;
}



/* --- NEW: CSS Variables for Table Styling --- */
:root {
    --bg-secondary: #ffffff;
    --bg-tertiary: #f8fafc;
    --border-color: #e2e8f0;
    --text-primary: #1e293b;
    --text-secondary: #475569;
    --accent-primary: #4a4b4e; /* Blue-500 to match your theme  #3b82f6 */
    /* --accent-primary: #f63bab;  Blue-500 to match your theme */
}


/* --- PREMIUM RAG TABLE STYLES --- */
/* --- MudBlazor-style Tables (Adapted for #answer) --- */

/* Wrapper for scrolling (Matches python app.py's wrap_tables_in_container) */
.table-wrapper {
    overflow-x: auto;
    margin: 1rem 0;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    background: var(--bg-secondary);
    max-width: 100%; /* Ensure it doesn't overflow container */
    display: block; /* Ensure block-level for proper width handling */
    overflow-x: auto; /* Enable horizontal scrolling */
    overflow-y: hidden; /* Hide vertical scrollbar unless needed */
}

#answer table {
    width: 100%;
    min-width: 600px; /* Force table to be wide enough to need scrolling on mobile */
    border-collapse: separate;
    border-spacing: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    margin: 0;
    font-size: 0.875rem;
    animation: tableSlideIn 0.3s ease-out;
}

#answer table thead {
    background: linear-gradient(135deg, var(--bg-tertiary), var(--bg-secondary));
}

#answer table th {
    background: transparent;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.875rem;
    padding: 1rem 0.75rem;
    text-align: left;
    border-bottom: 2px solid var(--accent-primary);
    position: relative;
    /* Specific header gradient styling */
    background: linear-gradient(135deg, rgba(156, 163, 175, 0.1) 0%, rgba(156, 163, 175, 0.05) 100%);
}

#answer table th:first-child {
    border-top-left-radius: 8px;
}

#answer table th:last-child {
    border-top-right-radius: 8px;
}

/* Header line effect */
#answer table th::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    /* background: linear-gradient(90deg, transparent 0%, var(--accent-primary) 20%, var(--accent-primary) 80%, transparent 100%); */
}

#answer table td {
    padding: 0.875rem 0.75rem;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
    vertical-align: top;
    line-height: 1.5;
    white-space: normal;
    word-break: break-word;
    min-width: 120px;
}

#answer table tbody tr {
    transition: background-color 0.2s ease;
}

#answer table tbody tr:hover {
    background-color: rgba(156, 163, 175, 0.05);
}

/* Remove bottom borders from last row */
#answer table tbody tr:last-child td {
    border-bottom: none;
}

#answer table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 8px;
}

#answer table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 8px;
}

/* Alternating row colors (Zebra Striping) */
#answer table tbody tr:nth-child(even) {
    background-color: rgba(156, 163, 175, 0.02);
}

#answer table tbody tr:nth-child(even):hover {
    background-color: rgba(156, 163, 175, 0.08);
}

/* Specific styling for table variants */
#answer table.full-width {
    width: 100%;
}

#answer table.auto-width {
    width: auto;
    margin: 1rem auto;
}

/* Striped pattern explicitly */
#answer table.striped tbody tr:nth-child(odd) {
    background-color: rgba(255, 255, 255, 0.01);
}

#answer table.striped tbody tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.03);
}

/* Bordered variant */
#answer table.bordered th,
#answer table.bordered td {
    border-right: 1px solid var(--border-color);
}

#answer table.bordered th:last-child,
#answer table.bordered td:last-child {
    border-right: none;
}

/* Compact variant */
#answer table.compact th,
#answer table.compact td {
    padding: 0.5rem 0.375rem;
}

/* Scrollbar styling for the table wrapper */
.table-wrapper::-webkit-scrollbar {
    height: 8px;
    width: 8px; 
}
.table-wrapper::-webkit-scrollbar-track {
    background: #f1f5f9; 
    border-radius: 4px;
}
.table-wrapper::-webkit-scrollbar-thumb {
    background: #cbd5e1; 
    border-radius: 4px;
}
.table-wrapper::-webkit-scrollbar-thumb:hover {
    background: #94a3b8; 
}

/* Responsive Font Sizing */
@media (max-width: 768px) {
    #answer table {
        font-size: 0.8rem;
    }
    #answer table th,
    #answer table td {
        padding: 0.75rem 0.5rem;
    }
}

@media (max-width: 480px) {
    #answer table {
        font-size: 0.75rem;
    }
    #answer table th,
    #answer table td {
        padding: 0.5rem 0.375rem;
    }
}

/* Animation for table reveal */
@keyframes tableSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* --- END PREMIUM RAG TABLE STYLES --- */


/* --- Summary Box Styles --- */
.summary-box {
    background: linear-gradient(to right, #eff6ff, #f8fafc); /* Light blue to white gradient */
    border: 1px solid #bfdbfe; /* Blue-200 border */
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.summary-box h3 {
    margin-top: 0 !important; /* Override generic h3 margin */
    margin-bottom: 1rem !important;
    font-size: 1.1rem !important;
    color: #1e40af !important; /* Darker blue text */
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom: none !important; /* Remove generic border */
    padding-bottom: 0 !important;
}

.summary-box .icon {
    font-size: 1.25rem;
}

.summary-box ul {
    margin: 0 !important;
    padding-left: 1.5rem !important;
}

.summary-box li {
    color: #334155; /* Slate-700 */
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

.summary-box li:last-child {
    margin-bottom: 0;
}

/* Dark mode adjustments (future proofing) */
@media (prefers-color-scheme: dark) {
    /* If you ever add dark mode, styles go here */
}





/* --- NEW: Feedback Bar Styles --- */
.feedback-bar {
    display: flex;
    align-items: center;
    gap: 0.1rem;
    border-top: 1px solid #e2e8f0; /* slate-200 */
    padding-top: 1rem;
    margin-top: 1.5rem;
    flex-wrap: wrap; /* Allow wrapping on small screens */
}

/* *** MODIFIED: Make buttons circular & icon-only *** */
.feedback-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center; /* Center the icon */
    gap: 0.1rem;
    
    background-color: transparent; /* No background */
    color: #475569; /* slate-600 */
    border: none; /* No border */
    
    /* Make it a circle */
    width: 2.5rem; /* 40px */
    height: 2.5rem; /* 40px */
    border-radius: 50%;
    padding: 0; /* Remove padding */
    
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    position: relative; /* <-- For tooltip anchoring */
}
.feedback-btn:hover {
    background-color: #e2e8f0; /* slate-200 */
    color: #1e293b; /* slate-800 */
    transform: translateY(-1px);
}
.feedback-btn.active {
    background-color: #e0e7ff; /* indigo-100 */
    color: #3730a3; /* indigo-800 */
    border: none; /* No border */
    fill: grey;
}

/* *** NEW: Fill the SVG icon when active *** */
.feedback-btn.active svg {
    /* fill: black; */
    fill: grey;
    stroke-width: 2.5; /* <-- NEW: Makes the icon bolder */
}
.feedback-btn svg {
    width: 1.25rem; /* 20px */
    height: 1.25rem;
}

/* *** MODIFIED: Make rule more specific *** */
.feedback-btn span[data-translate] {
    display: none;
}
.feedback-divider {
    width: 1px;
    height: 20px;
    background-color: #e2e8f0; /* slate-200 */
    margin: 0 0.25rem;
}

/* --- Feedback Tooltips --- */
.feedback-btn.tooltip .tooltiptext {
    width: auto;
    white-space: nowrap;
    background-color: #334155;
    color: #ffffff;
    padding: 5px 10px;
    bottom: -80%;
    left: 50%;
    transform: translateX(-50%);
}
.feedback-btn.tooltip .tooltiptext::after {
    border-color: #334155 transparent transparent transparent;
}
/* Show text on wider screens */
/* @media (min-width: 640px) {
    .feedback-btn span {
        display: inline;
    }
} */
/* Show text on wider screens */
/* @media (min-width: 640px) {
    .feedback-btn span {
        display: inline;
    }
} */



/* .reference-link {
    color: #2563eb;
    text-decoration: none;
    font-weight: 600;
}

.reference-link:hover {
    text-decoration: underline;
} */

.reference-link {
    /* Layout and Positioning */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    vertical-align: middle;

    /* Sizing */
    width: 2.5rem; /* Equivalent to w-6 */
    height: 1.2rem; /* Equivalent to h-6 */

    /* Typography */
    font-size: 0.65rem; /* Equivalent to text-xs */
    font-weight: 700; /* Equivalent to font-bold */
    color: #423f3f; /* Equivalent to text-white */

    /* Appearance */
    background-color: hsl(222, 89%, 93%); /* Equivalent to bg-blue-500 */
    /* border-radius: 9999px; */ /* Equivalent to rounded-full */
    border-radius: 6px;

    /* Transition */
    transition: background-color 150ms ease-in-out; /* Simplified transition */
}

/* Hover Effect */
.reference-link:hover {
    background-color: #2563eb; /* Equivalent to hover:bg-blue-600 (a darker shade of blue) */
    color: white;
}


/* Result Heading Styles */
.result-heading {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 0.75rem;
}

.result-heading svg {
    width: 28px;
    height: 28px;
    color: #1e3a8a;
}

.result-heading h2 {
    font-size: 1.5rem;
    color: #1e3a8a;
    margin: 0;
}

/* References Section */
.references-grid {
    margin-top: 0; /* MODIFIED: Removed top margin */
}


/* --- NEW: Disclaimer Styles --- */
#disclaimer-message {
    text-align: center;
    font-style: italic;
    color: #64748b; /* slate-500 */
    font-size: 0.875rem;
    margin-top: 2rem;
}


/* Search Results Grid */
.search-results-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 1.5rem;
    min-height: 100px; 
    /* max-width: 900px;
    align-items: center; */
}
.search-results-grid #loading-indicator {
    padding: 2rem 0;
    grid-column: 1 / -1;
}

@media (min-width: 768px) {
    .search-results-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Container for the 2-column reference grid */
.reference-card-container {
    display: grid;
    grid-template-columns: 1fr; /* This makes references stack vertically */
    gap: 1.5rem;
}

/* General Card styles (apply to both reference and search) */
.reference-card, .search-result-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background-color: white;
    border: 1px solid #E5E7EB;
    border-radius: 0.75rem;
    padding: 1rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.reference-card:hover, .search-result-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.card-top {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    align-items: flex-start;
}

.card-bottom {
    padding-top: 1rem;
    border-top: 1px solid #f1f5f9;
}

.thumbnail-wrapper {
    position: relative;
    width: 120px;
    height: 160px;
    flex-shrink: 0;
}

.thumbnail {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    object-fit: contain;
    border: 1px solid #e2e8f0;
    background-color: #f8fafc;
}

.ref-no-overlay {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    background-color: rgba(29, 78, 216, 0.8);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    line-height: 1;
}

.reference-meta {
    flex: 1;
    font-size: 0.875rem;
    color: #475569;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.reference-meta p {
    margin: 0;
}

.reference-meta strong {
    color: #334155;
    font-weight: 600;
}

.meta-subject {
    font-weight: 600;
    color: #1e3a8a;
    font-size: 1rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: justify;
}

.meta-date {
    font-weight: 600;
    color: #000000;
    font-size: 0.875rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: justify;
}

.card-bottom .summary-container {
    font-size: 0.9rem;
    color: #475569;
    line-height: 1.5;
}


.summary-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
    text-align: justify;
}

.summary-text.expanded {
    -webkit-line-clamp: unset;
    overflow: visible;
}

.show-more-btn {
    background: none;
    border: none;
    color: #2563eb;
    font-weight: 600;
    padding: 0.25rem 0 0 0;
    cursor: pointer;
    font-size: 0.875rem;
    margin-top: 0.5rem;
}

.show-more-btn:hover {
    text-decoration: underline;
}

/* --- NEW: Load More Button Style --- */
.load-more-btn {
    display: block;
    width: 100%;
    max-width: 300px;
    margin: 2rem auto 0 auto;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-weight: 600;
    color: #1e3a8a; /* blue-900 */
    background-color: #eef2ff; /* indigo-50 */
    border: 2px solid #c7d2fe; /* indigo-200 */
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}
.load-more-btn:hover {
    background-color: #e0e7ff; /* indigo-100 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}
.load-more-btn:disabled {
    background-color: #f1f5f9; /* slate-100 */
    color: #94a3b8; /* slate-400 */
    border-color: #e2e8f0; /* slate-200 */
    cursor: not-allowed;
}



/* Loading Indicator */
#loading-indicator {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 4rem 0;
    width: 100%;
}

.spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border-left-color: #2563eb;
    animation: spin 1s ease infinite;
}

.loading-text {
    margin-top: 1.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1e3a8a;
}


@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Error Message */
.error {
    color: #dc2626;
    font-weight: 500;
}

/* Responsive Design */
@media (max-width: 768px) {
    .reference-card-container, .search-results-grid {
        grid-template-columns: 1fr;
    }
    /* .results-area is already 1-column by default, 
    so no change needed here for it.
    */
}
@media (max-width: 600px) {
    .container {
        padding: 1.5rem 1rem;
    }

    header h1 {
        font-size: 2rem;
    }

    .card-top {
        flex-direction: column;
    }

    .thumbnail-wrapper {
        width: 100%;
        height: auto;
    }
    .thumbnail {
        width: 100%;
        height: auto;
        max-width: 200px;
    }
    
    .search-form {
        flex-direction: column;
        align-items: stretch;
    }
    
    .filter-controls {
        justify-content: space-between;
    }
}


/* --- NEW: Welcome Modal Styles --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    padding: 1rem;
    box-sizing: border-box;
}

.modal-content {
    background-color: #ffffff;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    max-width: 600px;
    width: 90%;
    z-index: 1001;
    line-height: 1.6;
    animation: modal-fade-in 0.3s ease-out;
    max-height: 80vh; /* Max height */
    overflow-y: auto; /* Scroll if content is too tall */

}

.modal-content h2 {
    color: #1e3a8a;
    font-weight: 800;
    font-size: 1.3rem;
    margin-top: 0;
    margin-bottom: 1rem;
    text-align: justify;
}

.modal-content h3 {
    color: #1e3a8a;
    font-weight: 700;
    font-size: 1rem;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 0.25rem;
    text-align: justify;
}

.modal-content p {
    font-size: 0.9rem;
    margin-bottom: 0.8rem;
    color: #334155;
    /* text-align: left; */ /*Override justify */
    text-align: justify;
}

.modal-content ul {
    padding-left: 20px;
    margin-bottom: 1rem;
    text-align: justify;
    font-size: 0.9rem;
}

.modal-content li {
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.modal-close-btn {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
    background-color: #2563eb;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s;
    margin-top: 2rem;
}

.modal-close-btn:hover {
    background-color: #1d4ed8;
}

/* Modal animation */
@keyframes modal-fade-in {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* We can just use the existing .hidden class */



/* ========================================================== */
/* Add this code to your existing 'style.css' file           */
/* ========================================================== */

/* This is the main container, styled to look like an input */
.chat-input-box {
    display: flex; /* Key: Use flexbox */
    flex-direction: column; /* Key: Stack children vertically */
    width: 100%;
    margin: 20px 0; /* Margin top/bottom */
    background-color: #ffffff; /* Light background */
    border: 1px solid #dfe1e5;
    border-radius: 28px; /* High radius for the "pill" shape */
    padding: 12px 16px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
}

/* This is your existing textarea, now made transparent */
#query-input,
#search-query-input {
    width: 100%;
    padding: 8px 4px; /* Give it some internal spacing */
    
    /* --- This is the most important part --- */
    border: none;           /* Remove default border */
    outline: none;          /* Remove focus ring */
    background: transparent;/* Make it invisible */
    resize: none;           /* Disable user resizing */
    /* -------------------------------------- */
    
    /* Re-apply font styles if they were on the old class */
    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    
    /* Prevents a scrollbar from appearing for just 1 row */
    overflow-y: hidden;
    
    /* Ensure it uses the full width inside the padding */
    box-sizing: border-box; 
}

/* This is the new container for the buttons */
.button-bar {
    display: flex;
    justify-content: space-between; /* Pushes left/right groups apart */
    align-items: center;
    margin-top: 8px; /* Space between textarea and buttons */
    width: 100%;
}

/* These group the buttons on each side */
.button-group-left,
.button-group-right {
    display: flex;
    align-items: center;
    gap: 8px; /* Space between buttons */
}

/* --- Styling for your existing buttons --- */
/* We remove the old positioning and style them as icon buttons */
.textarea-buttons {
   /* This class is no longer used for positioning, */
   /* but we use it to group the buttons on the right */
    display: flex;
    align-items: center;
    gap: 8px;
    
    /* *** ADD THIS LINE *** */
    /* This overrides any old 'position: absolute' rules */
    position: static; 
}

.textarea-buttons button {
    /* Reset default button styles */
    background-color: transparent;
    border: none;
    padding: 8px;
    border-radius: 50%; /* Make them circular */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px; /* Standard size */
    height: 40px; /* Standard size */
}

.textarea-buttons button:hover {
     background-color: #e0e6ec; /* Light hover effect */
}

.textarea-buttons button svg {
    width: 24px;
    height: 24px;
    stroke: #444746; /* Icon color */
}

/* Specific style for your submit button */
.textarea-buttons .submit-btn {
    background-color: #1a73e8; /* Blue submit button */
}
.textarea-buttons .submit-btn:hover {
    background-color: #1665c4;
}
.textarea-buttons .submit-btn svg {
    fill: #ffffff; /* White icon */
    stroke: none;
}

/* Specific style for your submit button */
.textarea-buttons .submit-btn {
    background-color: #1a73e8; /* Fallback background */
    /* New gradient */
    background-image: linear-gradient(to bottom, #2b84f3, #1a73e8);
    border: none;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.textarea-buttons .stop-btn {
    background-color: #1a73e8; /* Fallback background */
    /* New gradient */
    background-image: linear-gradient(to bottom, #e0e6ec, #e0e6ec);
    border: none;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.textarea-buttons .submit-btn:hover {
    background-image: linear-gradient(to bottom, #3c93ff, #2b84f3);
    /* Add a subtle lift */
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(0,0,0,0.15);
}
.textarea-buttons .stop-btn:hover {
    background-image: linear-gradient(to bottom, #d3d7db, #a8adb1);
    /* Add a subtle lift */
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(0,0,0,0.15);
}
.textarea-buttons .submit-btn:active {
    /* Add a press effect */
    transform: translateY(0px);
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.textarea-buttons .submit-btn svg {
    fill: #ffffff; /* White icon */
    stroke: none;
}

/* Make sure your hidden class is still defined */
.hidden {
    display: none !important;
}



/* ================================================== */
/* --- MODIFIED: Inline Feedback Form Styles --- */
/* ================================================== */

/* This is the new wrapper for the inline form */
.inline-feedback-container {
    /* Animation styles */
    transition: all 0.3s ease-in-out;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    /* We use 'hidden' class to hide it initially, 
       JS will remove 'hidden' and add 'is-open' */
}

.inline-feedback-container.is-open {
    max-height: 500px; /* Or enough to fit your form */
    opacity: 1;
    border-top: 1px solid #e2e8f0; /* slate-200 */
    padding-top: 1rem;
    margin-top: 1rem;
}

/* Remove old modal-specific styles */
.modal-overlay {
    /* All modal styles removed */
}

.modal-content {
    /* All modal styles removed */
}

/* Style for the form title */
#text-feedback-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 0.75rem;
}

/* Keep textarea styles */
.modal-textarea {
    width: 100%;
    min-height: 100px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 0.75rem;
    font-size: 1rem;
    font-family: 'Inter', sans-serif;
    resize: vertical;
    box-sizing: border-box;
    margin-top: 0; /* REMOVED margin-top */
}

/* NEW: Wrapper for the form buttons */
.feedback-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

/* NEW: Styles for the new "Close" button */
.feedback-close-btn {
    display: block;
    width: auto;
    min-width: 100px;
    padding: 0.65rem 1.5rem; /* Slightly smaller */
    font-size: 0.9rem; /* Slightly smaller */
    font-weight: 600;
    color: #334155; /* Dark text */
    background-color: #f1f5f9; /* Light gray */
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s;
}
.feedback-close-btn:hover {
    background-color: #e2e8f0;
}

/* MODIFIED: Keep submit button styles, but remove margin */
.modal-submit-btn {
    display: block;
    width: auto; /* Don't force full width */
    min-width: 100px;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
    background-color: #2563eb;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s;
    margin-top: 0; /* REMOVED margin-top */
    margin-left: 0; /* REMOVED margin-left */
}
.modal-submit-btn:hover {
    background-color: #1d4ed8;
}

/* REMOVED: .modal-close-x styles */
.modal-close-x {
    display: none; /* Hide the old 'x' button */
}

/* --- END OF FEEDBACK FORM STYLES --- */




/* Modal animation */
@keyframes modal-fade-in {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- NEW: Toast Notification --- */
.toast-notification {
    position: fixed;
    bottom: -100px; /* Start off-screen */
    left: 50%;
    transform: translateX(-50%);
    background-color: #334155; /* slate-700 */
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    font-weight: 600;
    z-index: 2000;
    transition: bottom 0.5s ease-in-out;
}
.toast-notification.show {
    bottom: 30px; /* Slide in */
}


/* --- NEW: Contact Form Styles --- */
.contact-form-container {
    max-width: 900px;
    margin: 0 auto;
    background-color: #ffffff;
    padding: 2rem 2.5rem;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
}
.contact-form .form-group {
    margin-bottom: 1.5rem;
}
.contact-form label {
    display: block;
    font-weight: 600;
    color: #475569;
    margin-bottom: 0.5rem;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea,
.contact-form select { /* <-- ADDED THIS */
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 1rem;
    color: #1e293b;
    box-sizing: border-box; /* Important */
    transition: border-color 0.2s, box-shadow 0.2s;
}
.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form textarea:focus,
.contact-form select:focus { /* <-- ADDED THIS */
    outline: none;
    border-color: #4f46e5;
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2);
}
.contact-form textarea {
    min-height: 150px;
    resize: vertical;
}
.contact-form .submit-btn {
    /* Re-use existing submit-btn styles from Q&A, but make it full-width */
    width: 100%;
    height: auto;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
}
/* --- End Contact Form Styles --- */

/* Floating gradient orbs */
@keyframes float {
  0%, 100% { transform: translateY(0px) translateX(0px); }
  50% { transform: translateY(-40px) translateX(20px); }
}

.animate-float {
  animation: float 12s ease-in-out infinite;
}

.animate-float-delay {
  animation: float 16s ease-in-out infinite;
}

/* Subtle moving grid */
@keyframes gridMove {
  from { background-position: 0 0; }
  to { background-position: 200px 200px; }
}

.bg-grid {
  background-image: 
    linear-gradient(rgba(59,130,246,0.05) 1px, transparent 1px),
    linear-gradient(to right, rgba(59,130,246,0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  animation: gridMove 20s linear infinite;
}


/* --- Reference Hover Card Container --- */
.ref-hover-card {
    position: fixed;
    z-index: 2000;
    width: 380px; /* Slightly wider to match image proportions */
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 1px #e2e8f0;
    padding: 0;
    pointer-events: auto;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    display: none;
    overflow: hidden;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.ref-hover-card.visible {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

/* --- MOBILE OVERRIDE --- */
@media (max-width: 480px) {
    .ref-hover-card.visible {
        /* CRITICAL: Force fixed positioning on mobile so it centers on the SCREEN, not the document */
        position: fixed !important; 
        
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 90%;
        max-height: 80vh;
        overflow-y: auto;
        
        /* Add a backdrop shadow/dimming effect could be nice here, but simple shadow is fine */
        box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    }
}

.hover-card-content {
    display: flex;
    flex-direction: column;
}

/* --- TOP SECTION (Thumb + Meta) --- */
.hover-card-top {
    display: flex;
    padding: 16px;
    gap: 16px;
    border-bottom: 1px solid #f1f5f9;
    background-color: #fff;
}

/* Thumbnail Wrapper */
.hover-thumbnail-wrapper {
    position: relative;
    width: 100px;       /* Match larger look in image */
    height: 130px;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    background-color: #f8fafc;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.hover-card-thumb {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Keeps document aspect ratio */
    display: block;
}

/* The Ref Number Badge (Top Left Pill) */
.hover-ref-overlay {
    position: absolute;
    top: 8px;
    left: 8px;
    background-color: #3b82f6; /* Bright Blue */
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 9999px; /* Pill shape */
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    z-index: 10;
}

/* Meta Data Column */
.hover-reference-meta {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Subject / Title - Dark Blue */
.hover-meta-subject {
    margin: 0 0 12px 0;
    font-size: 1.05rem; /* Larger title */
    font-weight: 700;
    color: #1e3a8a; /* Deep Blue text */
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hover-meta-details {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hover-meta-row {
    margin: 0;
    font-size: 0.9rem; /* Increased readability */
    color: #334155;
    line-height: 1.4;
}

.hover-meta-row strong {
    color: #0f172a; /* Darker label color */
    font-weight: 700;
}

/* --- BOTTOM SECTION (Summary) --- */
.hover-card-bottom {
    padding: 16px;
    background-color: #fff; /* White background like image */
}

.hover-summary-container {
    width: 100%;
}

.hover-summary-text {
    margin: 0 0 8px 0;
    font-size: 0.95rem; /* Larger body text */
    color: #475569;
    line-height: 1.5;
    text-align: left;
    display: -webkit-box;
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-align: justify;
}

/* "Show more" link style */
.hover-read-more {
    display: inline-block;
    font-size: 0.9rem;
    font-weight: 700;
    color: #2563eb; /* Link Blue */
    cursor: pointer;
    text-decoration: none;
}


/* --- Footer --- */
footer {
    margin-top: auto; /* Pins to bottom */
    text-align: center;
   /* padding-top: 1rem;
    padding-bottom: 0.5rem; */
    border-top: 1px solid #e2e8f0;
    width: 100%;
}
.footer-text {
    color: #94a3b8; /* Slate 400 */
    font-size: 0.9em;
    font-weight: 600;
    font-style: italic;
}