/* public/style.css */

/* Import facility-specific styles */
@import url('facility-styles.css');

/* --- Variables --- */
:root {
    /* Refined Facility Type Colors - Professional with depth */
    --color-nursing-home: #2563eb; /* Refined blue */
    --color-dialysis: #059669; /* Professional green */
    --color-inpatient-rehab: #d97706; /* Sophisticated amber */
    --color-long-term-care: #7c3aed; /* Elegant purple */
    --color-doctors: #dc2626; /* Professional red */
    --color-home-health: #0891b2; /* Refined teal */
    --color-hospice: #7c3aed; /* Purple */
    --color-hospitals: #ea580c; /* Refined orange */
    --color-unknown: #64748b; /* Slate gray */
    
    /* Star Rating Colors */
    --star-filled-color: #facc15; /* Warmer gold for filled stars */
    --star-empty-color: #e5e7eb; /* Softer gray for empty stars */

    /* Facility Type Text Colors (for light backgrounds) */
    --text-color-nursing-home: #fff;
    --text-color-dialysis: #fff;
    --text-color-inpatient-rehab: #fff;
    --text-color-long-term-care: #fff;
    --text-color-doctors: #fff;
    --text-color-home-health: #fff;
    --text-color-hospice: #fff;
    --text-color-hospitals: #fff;
    --text-color-unknown: #fff;

    /* Facility Type Filter Colors (Active State) */
    --filter-active-nursing-home: var(--color-nursing-home);
    --filter-active-dialysis: var(--color-dialysis);
    --filter-active-inpatient-rehab: var(--color-inpatient-rehab);
    --filter-active-long-term-care: var(--color-long-term-care);
    --filter-active-doctors: var(--color-doctors);
    --filter-active-home-health: var(--color-home-health);
    --filter-active-hospice: var(--color-hospice);
    --filter-active-hospitals: var(--color-hospitals);
    --filter-active-unknown: var(--color-unknown);
    
    /* Color scheme - More sophisticated palette */
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --primary-light: #3b82f6;
    --success: #059669;
    --success-light: #10b981;
    --warning: #d97706;
    --warning-light: #f59e0b;
    --danger: #dc2626;
    --danger-light: #ef4444;
    --info: #0891b2;
    --info-light: #06b6d4;
    
    /* Neutral colors */
    --neutral-50: #fafafa;
    --neutral-100: #f4f4f5;
    --neutral-200: #e4e4e7;
    --neutral-300: #d4d4d8;
    --neutral-400: #a1a1aa;
    --neutral-500: #71717a;
    --neutral-600: #52525b;
    --neutral-700: #3f3f46;
    --neutral-800: #27272a;
    --neutral-900: #18181b;
    
    /* Font settings */
    --base-font-size: 1rem;
    --font-primary: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-heading: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    
    /* Spacing and layout */
    --content-max-width: 860px; /* Slightly wider for better proportion */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    
    /* Enhanced Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
    --shadow-xl: 0 20px 35px -8px rgba(0, 0, 0, 0.1), 0 10px 15px -3px rgba(0, 0, 0, 0.05);
    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.04);
    
    /* Rounded corners */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.625rem;
    --radius-xl: 0.875rem;
    --radius-2xl: 1rem;
    --radius-full: 9999px;
    
    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slower: 500ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Subtle background colors */
    --subtle-bg-light-gray: #fafafa;
    --subtle-bg-very-light-gray: #f7f8fa;
    --subtle-bg-light-yellow: #fef9c3;

    /* Cream color for footer disclaimer */
    --cream-bg: #fffbeb;
    --footer-text-light: #f3f4f6;
    --footer-text-white: #ffffff;

    /* Dark Blue for Privacy Notice */
    --dark-blue: #1e40af;
    
    /* Professional accent colors */
    --accent-blue-light: #dbeafe;
    --accent-green-light: #d1fae5;
    --accent-amber-light: #fed7aa;
}

/* --- Base & Legibility --- */
body {
    font-family: var(--font-primary);
    line-height: 1.6;
    /* Professional animated gradient background with subtle texture */
    background: 
        /* Fine speckle pattern */
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 1%),
        radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.08) 0%, transparent 1%),
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.08) 0%, transparent 1%),
        /* Main gradient */
        linear-gradient(-45deg, #2563eb, #1d4ed8, #3730a3, #4c1d95);
    background-size: 50px 50px, 30px 30px, 40px 40px, 600% 600%;
    background-position: 0 0, 40px 60px, 130px 270px, 0 0;
    animation: gentleGradient 30s ease infinite;
    background-attachment: fixed;
    color: var(--neutral-800);
    font-size: var(--base-font-size);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
    overflow-y: visible !important; /* Ensure dropdowns can extend beyond page */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Ensure no horizontal overflow on mobile */
@media (max-width: 575.98px) {
    html, body {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }
}

/* Subtle, professional gradient animation */
@keyframes gentleGradient {
    0% {
        background-position: 0% 30%;
    }
    50% {
        background-position: 100% 70%;
    }
    100% {
        background-position: 0% 30%;
    }
}

/* Add subtle texture overlay - OPTION 1: Hexagonal Pattern (was option 4) */
/* 
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.3;
    z-index: -1;
    pointer-events: none;
    background: 
        radial-gradient(circle farthest-side at 0% 50%, transparent 0%, rgba(255,255,255,0.1) 100%),
        radial-gradient(circle farthest-side at 0% 0%, rgba(255,255,255,0.05) 0%, transparent 100%),
        radial-gradient(circle farthest-side at 100% 100%, rgba(255,255,255,0.08) 0%, transparent 100%);
    background-size: 60px 120px, 60px 120px, 40px 80px;
    background-position: 0 0, 30px 60px, 0 0;
}
 */


/* 
OPTION 2: Geometric Grid Pattern (was option 1)
 */
/* 
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.3;
    z-index: -1;
    pointer-events: none;
    background: 
        linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, 0.05) 2px, transparent 2px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 2px, transparent 2px);
    background-size: 50px 50px, 50px 50px, 100px 100px, 100px 100px;
}
 */


/* OPTION 3: Diamond Mesh Pattern (NEW) */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.28;
    z-index: -1;
    pointer-events: none;
    background: 
        linear-gradient(45deg, transparent 48%, rgba(255, 255, 255, 0.08) 49%, rgba(255, 255, 255, 0.08) 51%, transparent 52%),
        linear-gradient(-45deg, transparent 48%, rgba(255, 255, 255, 0.08) 49%, rgba(255, 255, 255, 0.08) 51%, transparent 52%),
        linear-gradient(45deg, transparent 48.5%, rgba(255, 255, 255, 0.04) 49.5%, rgba(255, 255, 255, 0.04) 50.5%, transparent 51.5%),
        linear-gradient(-45deg, transparent 48.5%, rgba(255, 255, 255, 0.04) 49.5%, rgba(255, 255, 255, 0.04) 50.5%, transparent 51.5%);
    background-size: 30px 30px, 30px 30px, 60px 60px, 60px 60px;
}








/* Add subtle floating light effect elements */
body::after {
    content: "";
    position: fixed;
    width: 80vmax;
    height: 80vmax;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 47% 53% 61% 39% / 45% 51% 49% 55%;
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
    animation: gentleFloat 25s ease-in-out infinite;
    z-index: -2;
    pointer-events: none;
    opacity: 0.6;
}

/* Professional floating animation */
@keyframes gentleFloat {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg) scale(1);
    }
    25% {
        transform: translate(2%, 1%) rotate(0.5deg) scale(1.02);
    }
    50% {
        transform: translate(1%, 2%) rotate(-0.5deg) scale(1);
    }
    75% {
        transform: translate(-1%, 1%) rotate(0.5deg) scale(0.98);
    }
}

/* --- Force Single Column Layout --- */
.content-container {
    width: 100%;
    max-width: var(--content-max-width);
    padding-right: var(--bs-gutter-x, .75rem);
    padding-left: var(--bs-gutter-x, .75rem);
    margin-right: auto;
    margin-left: auto;
    flex-grow: 1;
    overflow: visible !important; /* Ensure dropdowns aren't clipped */
}

/* Prevent horizontal scroll on mobile */
@media (max-width: 575.98px) {
    .content-container {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }
}

/* --- Content Matte Background --- */
.content-matte {
    background-color: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-radius: var(--radius-2xl);
    padding: 2.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25),
                0 20px 40px -8px rgba(0, 0, 0, 0.12),
                0 8px 16px -4px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: visible;
    transition: transform var(--transition-slow), box-shadow var(--transition-slow);
}

.content-matte::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.08), transparent 50%),
                radial-gradient(circle at 70% 80%, rgba(255, 255, 255, 0.04), transparent 40%),
                radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.02), transparent 80%);
    z-index: -1;
    pointer-events: none;
}

/* Logo container and matte background */
.logo-container {
    text-align: center;
    position: relative;
    z-index: 10;
    margin-top: 1rem;
}

.logo-matte {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-radius: var(--radius-2xl);
    padding: 2.5rem 3rem 2rem;
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.15),
                0 4px 16px -4px rgba(0, 0, 0, 0.08),
                0 0 0 1px rgba(255, 255, 255, 0.2);
    /* Use box-shadow for border instead */
    display: inline-block;
    position: relative;
    overflow: hidden;
    transition: transform var(--transition-slow), box-shadow var(--transition-slow);
}

.logo-matte::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.6) 50%, 
        transparent 100%);
    opacity: 0.8;
}

.logo-matte:hover {
    box-shadow: 0 15px 50px -12px rgba(0, 0, 0, 0.2),
                0 6px 20px -6px rgba(0, 0, 0, 0.1),
                0 0 0 1px rgba(255, 255, 255, 0.3);
}

/* Logo styling */
#mainLogo {
    max-width: 400px;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));
    transition: transform var(--transition-slow), filter var(--transition-slow);
    animation: fadeInDown 0.8s ease-out;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        /* transform: translateY(-20px); -- removed vertical movement */
    }
    to {
        opacity: 1;
        /* transform: translateY(0); -- removed vertical movement */
    }
}

#mainLogo:hover {
    transform: scale(1.03); /* removed translateY(-2px) */
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3))
            drop-shadow(0 3px 6px rgba(0, 0, 0, 0.2));
}

/* Medicare Facility Analyzer text styling */
.header-subtitle {
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 300;
    font-family: var(--font-heading);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3),
                 0 1px 3px rgba(0, 0, 0, 0.4);
    letter-spacing: 0.02em;
    transition: all var(--transition-slow);
    animation: fadeInUp 0.8s ease-out 0.2s backwards;
    position: relative;
    display: inline-block;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        /* transform: translateY(20px); -- removed vertical movement */
    }
    to {
        opacity: 1;
        /* transform: translateY(0); -- removed vertical movement */
    }
}

.header-subtitle::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 2px;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.6), transparent);
    opacity: 0;
    transition: opacity var(--transition-slow), width var(--transition-slow);
}

.header-subtitle:hover::after {
    opacity: 1;
    width: 120px;
}


h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--neutral-800);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.3;
    margin-bottom: 0.75em;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.125rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.875rem; }

label, .form-label {
    font-size: 0.9375rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: var(--neutral-700);
    letter-spacing: 0.01em;
}

/* Links */
a {
    color: var(--primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}
a:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

/* --- Bootstrap Overrides & Custom Components --- */

/* Cards - Modern, elegant style */
.card {
    border: none;
    border-radius: var(--radius-xl);
    background-color: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3),
                0 8px 32px rgba(0, 0, 0, 0.08),
                0 2px 8px rgba(0, 0, 0, 0.04);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    overflow: visible;
    position: relative;
}

/* Only apply hover transform to smaller elements, not main section cards */
.card:hover {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4),
                0 12px 40px rgba(0, 0, 0, 0.12),
                0 4px 12px rgba(0, 0, 0, 0.06);
}

/* Apply the transform hover effect only to smaller cards and elements */
/* Removed vertical movement on hover */
.card:not(.main-section-card):hover {
    /* transform: translateY(-3px); -- removed vertical movement */
}

.card-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    padding: 1.25rem 1.5rem;
    position: relative;
    overflow: hidden;
}

/* Ensure card body doesn't clip dropdowns */
.card-body {
    position: relative;
    overflow: visible !important; /* Override Bootstrap's overflow hidden */
}

/* Specifically target the facility selection section card */
.main-section-card:first-of-type {
    overflow: visible !important; /* Ensure dropdowns can extend beyond container */
    position: static !important; /* Static positioning to avoid clipping children */
}

/* Ensure proper dropdown positioning */
.position-relative {
    position: relative;
    z-index: 900; /* Ensure it's above other content */
}

/* Professional gradient headers with subtle depth */
.card-header.bg-primary { 
    background: linear-gradient(90deg, var(--primary-dark), var(--primary-light)) !important;
    position: relative;
}
.card-header.bg-success { 
    background: linear-gradient(90deg, var(--success), var(--success-light)) !important;
    position: relative;
}
.card-header.bg-warning { 
    background: linear-gradient(90deg, var(--warning), var(--warning-light)) !important;
    position: relative;
}

/* Add subtle shine to colored headers */
.card-header.bg-primary::after,
.card-header.bg-success::after,
.card-header.bg-warning::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.15) 0%, 
        transparent 50%);
    pointer-events: none;
}

/* Facility-specific styles moved to facility-styles.css */

/* Suggestions container styles moved to facility-styles.css */

.suggestions-container .list-group-item.error i {
    color: var(--danger);
}

/* New suggestion layout styles */
/* Suggestion content styles moved to facility-styles.css */

/* Professional Form Inputs */
.form-control {
    border: 1px solid rgba(0, 0, 0, 0.08);
    background-color: rgba(255, 255, 255, 0.95);
    transition: all var(--transition-base);
    font-size: 0.9375rem;
    padding: 0.625rem 1rem;
    box-shadow: var(--shadow-sm);
}

.form-control:focus {
    border-color: var(--primary);
    background-color: white;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1),
                var(--shadow-md);
    outline: none;
}

.form-control-lg {
    font-size: 1rem;
    padding: 0.875rem 1.25rem;
    border-radius: var(--radius-lg);
}

/* Facility Type Filters - Modern and accessible */
.filter-btn {
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: var(--neutral-600);
    background-color: white;
    transition: all var(--transition-base);
    border-radius: var(--radius-full);
    font-weight: 500;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04),
                0 1px 2px rgba(0, 0, 0, 0.06);
    position: relative;
    overflow: hidden;
}

.filter-btn:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0.2), rgba(255,255,255,0.4));
    transform: translateX(-100%);
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.filter-btn:hover {
    /* transform: translateY(-2px); -- removed vertical movement */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08),
                0 2px 4px rgba(0, 0, 0, 0.06);
    color: var(--neutral-800);
    border-color: rgba(0, 0, 0, 0.12);
}

.filter-btn:hover:before {
    transform: translateX(0);
}

.filter-btn.active {
    color: white;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: scale(1.02); /* removed translateY(-1px) */
}

/* Filter colors with improved gradients */
.filter-btn.filter-nursing-home.active {
    background: linear-gradient(90deg, var(--primary-dark), var(--color-nursing-home));
    border-color: transparent;
}

.filter-btn.filter-dialysis.active {
    background: linear-gradient(90deg, #059669, var(--color-dialysis));
    border-color: transparent;
}

.filter-btn.filter-inpatient-rehab.active {
    background: linear-gradient(90deg, #d97706, var(--color-inpatient-rehab));
    border-color: transparent;
}

.filter-btn.filter-long-term-care.active {
    background: linear-gradient(90deg, #7c3aed, var(--color-long-term-care));
    border-color: transparent;
}

.filter-btn.filter-doctors.active {
    background: linear-gradient(90deg, #dc2626, var(--color-doctors));
    border-color: transparent;
}

.filter-btn.filter-home-health.active {
    background: linear-gradient(90deg, #0d9488, var(--color-home-health));
    border-color: transparent;
}

.filter-btn.filter-hospice.active {
    background: linear-gradient(90deg, #7c3aed, var(--color-hospice));
    border-color: transparent;
}

.filter-btn.filter-hospitals.active {
    background: linear-gradient(90deg, #ea580c, var(--color-hospitals));
    border-color: transparent;
}

.filter-btn.filter-unknown.active {
    background: linear-gradient(90deg, #475569, var(--color-unknown));
    border-color: transparent;
}

/* Selected Facilities Bubbles - Redesigned for clarity */
.selected-facilities-container {
    min-height: 80px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.8));
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border-radius: var(--radius-lg);
    padding: 1rem !important;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    position: relative;
}

/* Facility bubble styles moved to facility-styles.css */

/* Toggle Sections - Enhanced for clarity */
#patientDetailsToggle, #rawDataToggle { 
    font-weight: 600; 
    letter-spacing: -0.01em;
    transition: all 0.2s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Ensure toggle buttons use correct text color based on their background */
.card-header #patientDetailsToggle,
.card-header #rawDataToggle { 
    color: inherit; 
}

/* For colored headers (with bg-* classes), ensure text is white */
.card-header.bg-primary #patientDetailsToggle,
.card-header.bg-success #patientDetailsToggle,
.card-header.bg-warning #patientDetailsToggle,
.card-header.bg-danger #patientDetailsToggle,
.card-header.bg-info #patientDetailsToggle,
.card-header.bg-dark #patientDetailsToggle,
.card-header.text-white #patientDetailsToggle {
    color: white !important; 
}

/* Hover state for colored headers */
.card-header.bg-primary #patientDetailsToggle:hover,
.card-header.bg-success #patientDetailsToggle:hover,
.card-header.bg-warning #patientDetailsToggle:hover,
.card-header.bg-danger #patientDetailsToggle:hover,
.card-header.bg-info #patientDetailsToggle:hover,
.card-header.bg-dark #patientDetailsToggle:hover,
.card-header.text-white #patientDetailsToggle:hover {
    color: rgba(255, 255, 255, 0.9) !important; 
}

#patientDetailsToggle:hover, #rawDataToggle:hover {
    opacity: 0.9;
}

#patientDetailsToggle .toggle-icon, #rawDataToggle .toggle-icon { 
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
    display: inline-block;
    font-size: 1.1em;
    opacity: 0.8;
}

#patientDetailsToggle[aria-expanded="true"] .toggle-icon,
#rawDataToggle[aria-expanded="true"] .toggle-icon { 
    transform: rotate(180deg); 
    opacity: 1;
}

/* Patient Details Section Specifics */
.patient-context-examples {
    padding-left: 1.5rem;
    margin-top: -0.25rem;
    list-style: none;
}

.patient-context-examples li {
    position: relative;
    padding-left: 0.5rem;
    margin-bottom: 0.4rem;
}

.patient-context-examples li:before {
    content: "•";
    position: absolute;
    left: -1rem;
    color: var(--color-nursing-home);
    font-weight: bold;
}

/* Privacy Notice Styling - Professional and informative */
.privacy-notice {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1px solid rgba(37, 99, 235, 0.2);
    color: var(--neutral-700);
    padding: 1rem 1.25rem;
    border-radius: var(--radius-lg);
    font-size: 0.875rem;
    line-height: 1.7;
    position: relative;
    margin-top: 1rem;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.08);
    overflow: hidden;
}

.privacy-notice::before {
    content: '🔒';
    position: absolute;
    top: 1rem;
    left: 1.25rem;
    font-size: 1.25rem;
    opacity: 0.8;
}

.privacy-notice strong {
    color: var(--primary-dark);
    font-weight: 600;
    letter-spacing: 0.02em;
    font-size: 0.9rem;
}

.privacy-notice {
    padding-left: 3.5rem; /* Make room for the lock icon */
}

/* Advanced Settings Accordion - Refined */
#advancedSettingsAccordion .accordion-item {
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: var(--radius-md);
    overflow: hidden;
}

#advancedSettingsAccordion .accordion-button {
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.6rem 1rem;
    background-color: rgba(243, 244, 246, 0.7);
    color: #4b5563;
    transition: all 0.2s ease;
}

#advancedSettingsAccordion .accordion-button:hover {
    background-color: rgba(243, 244, 246, 0.9);
}

#advancedSettingsAccordion .accordion-button:not(.collapsed) {
    background-color: rgba(219, 234, 254, 0.5);
    color: var(--primary-dark);
    font-weight: 600;
}

#advancedSettingsAccordion .accordion-button:focus {
    box-shadow: 0 0 0 0.15rem rgba(59, 130, 246, 0.25);
    border-color: rgba(59, 130, 246, 0.5);
}

#advancedSettingsAccordion .accordion-body {
    font-size: 0.9rem;
    background-color: rgba(249, 250, 251, 0.7);
    padding: 1rem;
}

#advancedSettingsAccordion textarea#initialPrompt {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.85rem;
    line-height: 1.6;
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-sm);
    padding: 0.75rem;
}

/* Analyze & Chat Section - Enhanced */
.analyze-controls {
    padding-top: 0.5rem;
}

/* Primary CTA button styling */
#analyzeAndChatBtn {
    background: linear-gradient(90deg, var(--success), var(--success-light));
    border: none;
    border-radius: var(--radius-lg);
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 1rem 2rem;
    font-size: 1.0625rem;
    transition: all var(--transition-base);
    box-shadow: 0 8px 24px rgba(5, 150, 105, 0.25),
                0 4px 8px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Shine effect on button */
#analyzeAndChatBtn::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.2) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform 0.8s;
    z-index: 1;
}

#analyzeAndChatBtn:hover:not(:disabled) {
    /* transform: translateY(-3px); -- removed vertical movement */
    box-shadow: 0 12px 32px rgba(5, 150, 105, 0.3),
                0 6px 12px rgba(0, 0, 0, 0.1);
}

#analyzeAndChatBtn:hover:not(:disabled)::after {
    transform: translateX(100%);
}

#analyzeAndChatBtn:active:not(:disabled) {
    /* transform: translateY(-1px); -- removed vertical movement */
    box-shadow: 0 4px 16px rgba(5, 150, 105, 0.2),
                0 2px 4px rgba(0, 0, 0, 0.08);
}

#analyzeAndChatBtn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

/* Button text styling */
#analyzeAndChatBtn span {
    position: relative;
    z-index: 2;
}

/* Glowing orb animation for analyze button */
.glowing-orb {
    display: inline-block;
    width: 12px;
    height: 12px;
    background: radial-gradient(circle at center, #4ade80 0%, #16a34a 70%);
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(74, 222, 128, 0.8),
                0 0 40px rgba(74, 222, 128, 0.4),
                inset 0 0 10px rgba(255, 255, 255, 0.3);
    animation: orb-pulse 2s ease-in-out infinite;
    margin-right: 0.5rem;
    vertical-align: middle;
    position: relative;
}

/* Glowing orb pulse animation */
@keyframes orb-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 20px rgba(74, 222, 128, 0.8),
                    0 0 40px rgba(74, 222, 128, 0.4),
                    inset 0 0 10px rgba(255, 255, 255, 0.3);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 0 30px rgba(74, 222, 128, 1),
                    0 0 60px rgba(74, 222, 128, 0.6),
                    inset 0 0 15px rgba(255, 255, 255, 0.5);
    }
}

/* Status Messages */
.status-message {
    padding: 0.9rem 1.2rem;
    margin-top: 0.75rem;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-size: 0.95em;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    display: none; /* Hide initially */
    box-shadow: var(--shadow-sm);
}

/* Status message types with enhanced styling */
.status-message.error {
    background-color: rgba(254, 226, 226, 0.8);
    color: #b91c1c;
    border-color: rgba(239, 68, 68, 0.3);
    display: flex;
}

.status-message.loading {
    background-color: rgba(219, 234, 254, 0.8);
    color: #1e40af;
    border-color: rgba(59, 130, 246, 0.3);
    display: flex;
}

.status-message.success {
    background-color: rgba(220, 252, 231, 0.8);
    color: #065f46;
    border-color: rgba(16, 185, 129, 0.3);
    display: flex;
}

/* Spinner styling */
.status-message .spinner-border {
    width: 1.25rem;
    height: 1.25rem;
    border-width: .2em;
}

/* Span holding the text message content */
.status-message .status-text {
    flex-grow: 1;
    font-weight: 500;
}

/* Unified Analysis Status Banner */
#analysisStatusBanner {
    width: 100%;
    background-color: rgba(219, 234, 254, 0.9);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: #1e40af;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    gap: 0.875rem;
    box-shadow: var(--shadow-sm);
    transition: opacity 0.3s ease-in-out;
}

#analysisStatusBanner .spinner-border {
    width: 1.25rem;
    height: 1.25rem;
    border-width: 0.2em;
    flex-shrink: 0;
}

#analysisStatusBanner .status-text {
    flex-grow: 1;
    font-weight: 500;
    transition: opacity 0.3s ease-in-out;
}

/* Chat Interface - Modern messaging style */
.chat-output-container {
    max-height: 60vh;
    overflow-y: auto;
    background-color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    border: 1px solid rgba(0, 0, 0, 0.04);
}

#chatHistory {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.message {
    padding: 1rem 1.2rem;
    border-radius: var(--radius-lg);
    max-width: 85%;
    position: relative;
    line-height: 1.6;
    font-size: 0.95rem;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.message:hover {
    box-shadow: var(--shadow-md);
}

/* User messages: Right-aligned with gradient */
.message.user-message {
    background: linear-gradient(to right, #e9f5ff, #dbeafe);
    color: #1e3a8a;
    align-self: flex-end;
    border-bottom-right-radius: 0.5rem;
    margin-left: auto;
    border: none;
    font-weight: 500;
}

/* AI messages: Left-aligned with subtle styling */
.message.ai-message {
    background-color: white;
    color: #111827;
    align-self: flex-start;
    border-bottom-left-radius: 0.5rem;
    margin-right: auto;
    padding-right: 45px;
    border: 1px solid rgba(0, 0, 0, 0.04);
}

/* Styles for rendered markdown inside AI messages */
.ai-message .message-content p:first-child { margin-top: 0; }
.ai-message .message-content p:last-child { margin-bottom: 0; }
.ai-message .message-content p { margin-bottom: 0.8em; }
.ai-message .message-content ul, .ai-message .message-content ol { padding-left: 20px; margin-bottom: 0.8em; }
.ai-message .message-content li { margin-bottom: 0.4em; }
.ai-message .message-content h1, .ai-message .message-content h2, .ai-message .message-content h3, .ai-message .message-content h4 { margin-top: 1.2em; margin-bottom: 0.5em; color: #1a5276; font-weight: 600; }
.ai-message .message-content h1 { font-size: 1.3em; }
.ai-message .message-content h2 { font-size: 1.15em; }
.ai-message .message-content h3 { font-size: 1.05em; }
.ai-message .message-content code { background-color: rgba(0,0,0,0.06); padding: 2px 5px; border-radius: 3px; font-family: var(--bs-font-monospace); font-size: 0.9em; color: #58151c; /* Dark red */ }
.ai-message .message-content pre { background-color: rgba(0,0,0,0.06); padding: 10px; border-radius: 4px; overflow-x: auto; font-family: var(--bs-font-monospace); font-size: 0.9em; border: 1px solid rgba(0,0,0,0.08); }
.ai-message .message-content pre code { background: none; padding: 0; color: inherit; }
.ai-message .message-content blockquote { border-left: 3px solid #adb5bd; padding-left: 10px; margin-left: 0; color: #495057; font-style: italic; }
.ai-message .message-content table { border-collapse: collapse; width: auto; margin-bottom: 1em; border: 1px solid #dee2e6; background-color: #fff; }
.ai-message .message-content th, .ai-message .message-content td { border: 1px solid #dee2e6; padding: 6px 8px; text-align: left; }
.ai-message .message-content th { background-color: #e9ecef; font-weight: bold; }
.ai-message .message-content tr:nth-child(even) { background-color: var(--subtle-bg-very-light-gray); }
.ai-message .message-content a { color: var(--bs-link-color); text-decoration: underline; }
.ai-message .message-content a:hover { color: var(--bs-link-hover-color); }

/* Copy Button (Chat Message) */
.copy-message-btn { position: absolute; top: 8px; right: 8px; padding: 3px 6px; font-size: 11px; background-color: rgba(0, 0, 0, 0.05); color: #555; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: var(--bs-border-radius-sm); cursor: pointer; transition: all 0.2s ease; opacity: 0; /* Hide by default */ }
.ai-message:hover .copy-message-btn { opacity: 0.7; } /* Show on hover */
.copy-message-btn:hover { opacity: 1; background-color: rgba(0, 0, 0, 0.1); }
.copy-message-btn:active { background-color: rgba(0, 0, 0, 0.15); }
/* Success/Error feedback on copy button */
.copy-message-btn.btn-outline-success { background-color: var(--bs-success-bg-subtle); border-color: var(--bs-success-border-subtle); color: var(--bs-success-text-emphasis); opacity: 1; }
.copy-message-btn.btn-outline-danger { background-color: var(--bs-danger-bg-subtle); border-color: var(--bs-danger-border-subtle); color: var(--bs-danger-text-emphasis); opacity: 1; }

/* Thinking/Error Message Styling */
.message.ai-message.thinking-message .message-content { color: #6c757d; font-style: italic; }
.message.ai-message.error-message { background-color: var(--bs-danger-bg-subtle); color: var(--bs-danger-text-emphasis); border: 1px solid var(--bs-danger-border-subtle); }
.message.ai-message.error-message .message-content { font-style: normal; }
.message.ai-message.thinking-message .copy-message-btn,
.message.ai-message.error-message .copy-message-btn { display: none; }
.message.ai-message.thinking-message .message-content { min-width: 65px; display: inline-block; }

/* Raw Data Section */
#rawOutput { 
    max-height: 50vh; 
    overflow-y: auto; 
    background-color: var(--subtle-bg-very-light-gray);
    padding: 1rem;
    font-size: 0.85rem;
    line-height: 1.5;
    color: #333;
}

/* Compact styling for markdown in raw data section */
#rawOutput h1, #rawOutput h2, #rawOutput h3, #rawOutput h4, #rawOutput h5, #rawOutput h6 {
    font-size: 0.95rem;
    margin-top: 0.75rem;
    margin-bottom: 0.4rem;
    color: #1a5276;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.3;
}

#rawOutput h1 {
    font-size: 1.1rem;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    padding-bottom: 0.2rem;
}

#rawOutput h2 {
    font-size: 1rem;
}

#rawOutput p {
    margin-bottom: 0.5rem;
    margin-top: 0.3rem;
}

#rawOutput ul, #rawOutput ol {
    margin-top: 0.3rem;
    margin-bottom: 0.5rem;
    padding-left: 1.2rem;
}

#rawOutput li {
    margin-bottom: 0.2rem;
}

#rawOutput table {
    font-size: 0.8rem;
    margin-top: 0.5rem;
    margin-bottom: 0.8rem;
}

#rawOutput th, #rawOutput td {
    padding: 3px 5px;
}

#rawOutput blockquote {
    margin-left: 0.5rem;
    padding-left: 0.5rem;
    border-left: 2px solid #adb5bd;
    font-size: 0.85rem;
    font-style: italic;
    margin-bottom: 0.5rem;
}

#rawOutput hr {
    margin: 0.5rem 0;
    opacity: 0.2;
}

#rawOutput .placeholder-text { 
    font-family: inherit; 
    color: #6c757d; 
    font-style: italic; 
}

.copy-button { 
    z-index: 10; 
}

/* Footer - Modern and professional */
.footer {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
    color: var(--footer-text-light);
    font-size: 0.9rem;
    border-top: none;
    position: relative;
    overflow: hidden;
    box-shadow: 0 -10px 20px -5px rgba(0, 0, 0, 0.1);
    margin-top: 4rem;
}

.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.2) 50%, 
        transparent 100%);
}

.footer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 20% 80%, rgba(255,255,255,0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255,255,255,0.03) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(255,255,255,0.02) 0%, transparent 70%);
    pointer-events: none;
}

.footer > .container {
    position: relative;
    z-index: 1;
}

/* Footer Text Card Styling - Professional design */
.footer-text-card {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.95));
    border-radius: var(--radius-xl);
    box-shadow: 0 20px 40px -8px rgba(0, 0, 0, 0.15),
                0 8px 16px -4px rgba(0, 0, 0, 0.08);
    text-align: left;
    color: var(--neutral-700);
    border: 1px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    position: relative;
    overflow: hidden;
    transition: transform var(--transition-slow), box-shadow var(--transition-slow);
}

.footer-text-card:hover {
    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.18),
                0 12px 24px -6px rgba(0, 0, 0, 0.1);
}

/* Professional gradient top accent */
.footer-text-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--primary-light), var(--primary));
    opacity: 0.9;
}

/* Subtle pattern overlay */
.footer-text-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 100% 0%, rgba(37, 99, 235, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 0% 100%, rgba(37, 99, 235, 0.03) 0%, transparent 50%);
    pointer-events: none;
}

/* Content styling */
.card-content {
    padding: 1.75rem 2rem;
    font-size: 0.9375rem;
    line-height: 1.7;
    position: relative;
    z-index: 1;
}

.card-content p {
    color: var(--primary-dark);
    font-weight: 600;
    margin-bottom: 1.25rem;
    font-size: 0.975rem;
    letter-spacing: 0.01em;
}

.content-points {
    display: flex;
    flex-direction: column;
    gap: 0.225rem;
    margin-bottom: 1.5rem;
}

.content-point {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 0.5rem 0;
    position: relative;
    transition: transform var(--transition-fast);
}

/* Removed hover transform for content points */

.point-icon {
    color: var(--primary);
    font-size: 1.25rem;
    font-weight: bold;
    line-height: 1;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.point-text {
    color: var(--neutral-600);
    letter-spacing: 0.01em;
    line-height: 1.6;
    font-size: 0.9rem;
}

.content-reference {
    font-size: 0.85rem;
    color: #6b7280;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    text-align: center;
}

/* Links *inside* the card */
.footer-text-card a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
    position: relative;
    padding-bottom: 1px;
    border-bottom: 1px solid transparent;
}

.footer-text-card a:hover {
    color: var(--primary-dark);
    border-bottom-color: var(--primary-dark);
}

/* Footer Links and Copyright Text - Modern styling */
.footer-links {
    margin-top: 1.75rem;
    margin-bottom: 0.75rem;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.footer-side-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.footer-side-group:first-child {
    justify-content: flex-end;
}

.footer-side-group:last-child {
    justify-content: flex-start;
}

.footer-link-center {
    text-align: center;
    padding: 0 1rem;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.85) !important;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.footer-links a span {
    position: relative;
    display: inline-block;
    padding: 0.25rem 0;
}

.footer-links a span:after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: white;
    transition: width 0.3s ease;
}

.footer-links a:hover {
    color: white !important;
}

.footer-links a:hover span:after {
    width: 100%;
}

.link-separator {
    color: rgba(255, 255, 255, 0.3);
    font-weight: 300;
    user-select: none;
}

/* Refined footer copyright section */
.footer-copyright {
    margin-top: 1.5rem;
    position: relative;
    padding-top: 1.2rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}

.footer-copyright:before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 2px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}

.footer-copyright .copyright-text {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.footer-copyright .disclaimer-text {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.75rem;
    letter-spacing: 0.01em;
    max-width: 450px;
}

/* CMS link in footer disclaimer */
.footer-copyright .cms-link {
    color: rgba(255, 255, 255, 0.85) !important;
    text-decoration: none !important;
    font-weight: 500;
    transition: color 0.2s ease;
}

.footer-copyright .cms-link:hover {
    color: rgba(255, 255, 255, 1) !important;
    text-decoration: none !important;
}


/* Responsive Adjustments */
@media (max-width: 767.98px) { /* Below Medium breakpoints */
    :root {
        --base-font-size: 0.9375rem;
    }
    
    .header-subtitle {
        font-size: 1.25rem;
    }
    
    /* Fix logo container overflow on tablets */
    .logo-container {
        padding: 0 1rem;
    }
    
    .logo-matte {
        padding: 2.5rem 2.5rem 2rem;
        max-width: 100%;
    }
    
    .message { max-width: 90%; }
    .message.ai-message { padding-right: 40px; }
    .copy-message-btn { font-size: 10px; padding: 2px 5px; top: 6px; right: 6px; }
    #advancedSettingsAccordion .accordion-body { padding-left: 0.5rem; padding-right: 0.5rem; }
    .card-content { padding: 1.25rem 1.5rem; }
    .content-matte { 
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }
    #mainLogo { 
        max-width: 320px;
        width: 100%;
        height: auto;
    }
    
    /* Facility bubble responsive styles moved to facility-styles.css */
    
    #analyzeAndChatBtn {
        padding: 0.875rem 1.5rem;
        font-size: 1rem;
    }
}

@media (max-width: 575.98px) { /* Below Small breakpoints */
    body { font-size: 0.875rem; }
    
    .header-subtitle {
        font-size: 1.125rem;
        letter-spacing: 0.01em;
    }
    
    /* Fix logo container overflow on mobile */
    .logo-container {
        padding: 0.5rem 1rem;
        margin-bottom: 1rem;
    }
    
    .logo-matte {
        padding: 2rem 1.75rem 1.5rem;
        max-width: 100%;
        box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.12),
                    0 4px 8px -4px rgba(0, 0, 0, 0.08);
    }
    
    /* Facility bubble responsive styles moved to facility-styles.css */
    .message { max-width: 95%; font-size: 0.875rem; }
    .message.ai-message { padding-right: 35px; }
    .copy-message-btn { font-size: 9px; padding: 2px 4px; top: 5px; right: 5px; }
    .chat-input-area { flex-direction: column; align-items: stretch; }
    .chat-input-area textarea { margin-bottom: 0.5rem; }
    .chat-input-area button { width: 100%; }
    .content-matte { 
        padding: 0.75rem;
        border-radius: var(--radius-lg);
        margin-bottom: 1rem;
    }
    
    /* Reduce card padding on mobile */
    .card-body {
        padding: 1rem;
    }
    
    .card-content { 
        padding: 1rem 1.25rem;
        font-size: 0.85rem;
    }
    .content-point {
        gap: 0.625rem;
        padding: 0.375rem 0;
    }
    .point-icon {
        font-size: 1rem;
        width: 20px;
        height: 20px;
    }
    .content-reference {
        font-size: 0.8rem;
    }
    #mainLogo { 
        max-width: 260px;
        width: 100%;
        height: auto;
    }
    
    #analyzeAndChatBtn {
        padding: 0.75rem 1.25rem;
        font-size: 0.9375rem;
    }
    
    .filter-btn {
        font-size: 0.8125rem;
        padding: 0.375rem 0.75rem;
    }
    
    .card-header {
        padding: 1rem 1.25rem;
    }
    
    .card-header h2 {
        font-size: 1.125rem;
    }
    
    /* Reduce form control padding on mobile */
    .form-control {
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
    }
    
    .form-control-lg {
        padding: 0.625rem 1rem;
        font-size: 0.9375rem;
    }
    
    /* Optimize space between sections */
    .main-section-card {
        margin-bottom: 0.75rem !important;
    }
}

/* Enhanced entrance animations for main section cards */
.main-section-card {
    animation: slideInUp 0.6s ease-out backwards;
    /* Professional depth */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12),
                0 2px 10px rgba(0, 0, 0, 0.08);
    position: relative;
    /* Clip content to prevent colored headers from extending beyond borders */
    overflow: hidden;
}

/* Subtle white border using ::after pseudo-element */
.main-section-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1.5px solid rgba(255, 255, 255, 0.7);
    border-radius: var(--radius-xl);
    pointer-events: none;
    z-index: 10;
}

/* Fix colored header corners for main section cards */
.main-section-card .card-header {
    /* Slightly smaller radius to prevent color bleed at corners */
    border-radius: calc(var(--radius-xl) - 2px) calc(var(--radius-xl) - 2px) 0 0 !important;
    margin-top: 1px;
    margin-left: 1px;
    margin-right: 1px;
}

.main-section-card:hover {
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.16),
                0 5px 15px rgba(0, 0, 0, 0.1);
}

.main-section-card:hover::after {
    border-color: rgba(255, 255, 255, 0.85);
    border-width: 2px;
}

.main-section-card:nth-child(1) {
    animation-delay: 0.1s;
}

.main-section-card:nth-child(2) {
    animation-delay: 0.2s;
}

.main-section-card:nth-child(3) {
    animation-delay: 0.3s;
}

.main-section-card:nth-child(4) {
    animation-delay: 0.4s;
}

@keyframes slideInUp {
    from {
        opacity: 0;
        /* transform: translateY(30px); -- removed vertical movement */
    }
    to {
        opacity: 1;
        /* transform: translateY(0); -- removed vertical movement */
    }
}

/* Enhanced scrollbar styling */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.02);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 5px;
    transition: background var(--transition-fast);
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.25);
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.02);
}

/* Selection color */
::selection {
    background-color: rgba(37, 99, 235, 0.2);
    color: inherit;
}

::-moz-selection {
    background-color: rgba(37, 99, 235, 0.2);
    color: inherit;
}

/* public/style.css */
/* Append these styles to the end of the file */

/* --- Download PDF Button - Completely redesigned --- */
.download-pdf-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1500; /* Increased to ensure it's above other elements */
    display: none;
    opacity: 0;
    visibility: hidden; /* Start hidden and show with JS */
    /* transform: translateY(20px); -- removed initial vertical offset */
    transition: opacity 0.4s ease; /* Removed transform transition */
    padding: 0.9rem 1.4rem;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    background: linear-gradient(90deg, #059669, #10b981); /* Fresh green gradient */
    color: white !important; /* Force white text */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); /* Stronger text shadow for better legibility */
    border: none;
    border-radius: var(--radius-full);
    box-shadow: 0 10px 25px -5px rgba(16, 185, 129, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.download-pdf-btn:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0.1), rgba(255,255,255,0.2));
    transform: translateX(-100%);
    transition: transform 0.6s ease;
    z-index: -1;
}

.download-pdf-btn:hover:before {
    transform: translateX(0);
}

.download-pdf-btn:hover {
    /* transform: translateY(-3px); -- removed vertical movement */
    box-shadow: 0 15px 30px -5px rgba(16, 185, 129, 0.5), 0 10px 15px -5px rgba(0, 0, 0, 0.1);
}

.download-pdf-btn:active {
    /* transform: translateY(-1px); -- removed vertical movement */
    box-shadow: 0 5px 15px -3px rgba(16, 185, 129, 0.4);
}

.download-pdf-btn.show {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    opacity: 1;
    visibility: visible;
    /* transform: translateY(0); -- removed transform */
    will-change: opacity; /* removed transform from will-change */
}

.download-pdf-btn svg {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.download-pdf-btn span {
    color: white !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Add small bounce animation for attention */
@keyframes pulse-attention {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.download-pdf-btn.show {
    animation: pulse-attention 2s ease-in-out 1;
}

/* Custom modal styling for PDF success and tips modals */
.modal-header.bg-success h5.modal-title,
.modal-header.bg-info h5.modal-title {
    color: white !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    font-weight: 600;
}

/* Custom gradient headers for modals */
.modal-header.pdf-success-header {
    background: linear-gradient(90deg, #059669, #10b981) !important;
    color: white !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    border-bottom: none;
}

.modal-header.pdf-success-header .modal-title {
    color: white !important;
}

.modal-header.pdf-tips-header {
    background: linear-gradient(90deg, #2563eb, #3b82f6) !important;
    color: white !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    border-bottom: none;
}

.modal-header.pdf-tips-header .modal-title {
    color: white !important;
}

/* Styled download tips button */
.download-tips-btn {
    background: linear-gradient(90deg, #2563eb, #3b82f6);
    color: white !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    font-weight: 500;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
    box-shadow: 0 2px 5px rgba(37, 99, 235, 0.3);
}

.download-tips-btn:hover {
    background: linear-gradient(90deg, #1d4ed8, #2563eb);
    /* transform: translateY(-1px); -- removed vertical movement */
    box-shadow: 0 4px 8px rgba(37, 99, 235, 0.4);
}

.download-tips-btn:active {
    /* transform: translateY(0); -- removed vertical movement */
    box-shadow: 0 2px 3px rgba(37, 99, 235, 0.3);
}

/* --- Inline PDF button for chat section --- */
.download-pdf-btn-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1.2rem;
    font-size: 0.9rem;
    font-weight: 600;
    background: linear-gradient(90deg, #059669, #10b981);
    color: white !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 8px -2px rgba(16, 185, 129, 0.3);
    transition: opacity 0.3s ease; /* Removed transform transition */
    opacity: 0;
    /* transform: translateY(10px); -- removed initial vertical offset */
}

.download-pdf-btn-inline.show {
    opacity: 1;
    /* transform: translateY(0); -- removed transform */
    will-change: opacity; /* removed transform from will-change */
}

@keyframes slide-in-bottom {
    0% {
        /* transform: translateY(10px); -- removed vertical movement */
        opacity: 0;
    }
    100% {
        /* transform: translateY(0); -- removed vertical movement */
        opacity: 1;
    }
}

.download-pdf-btn-inline:hover {
    background: linear-gradient(90deg, #047857, #059669);
    box-shadow: 0 6px 10px -2px rgba(16, 185, 129, 0.4);
    /* transform: translateY(-2px); -- removed vertical movement */
}

.download-pdf-btn-inline:active {
    /* transform: translateY(0); -- removed vertical movement */
    box-shadow: 0 3px 6px -2px rgba(16, 185, 129, 0.3);
}

.download-pdf-btn-inline svg {
    width: 18px;
    height: 18px;
}

/* --- Responsive adjustments for PDF buttons --- */
@media (max-width: 575.98px) { /* Below Small breakpoints */
    .download-pdf-btn {
        bottom: 20px;
        right: 20px;
        padding: 0.8rem 1.2rem;
        font-size: 0.85rem;
    }
    .download-pdf-btn svg {
        width: 16px;
        height: 16px;
    }
    
    .download-pdf-btn-inline {
        padding: 0.5rem 1rem;
        font-size: 0.85rem;
    }
    .download-pdf-btn-inline svg {
        width: 16px;
        height: 16px;
    }
}

/* public/style.css */
/* Append this style for the info icon */

.filter-btn .info-icon {
    font-style: normal; /* Prevent italics if using 'i' tag */
    font-weight: bold;
    font-size: 0.9em; /* Slightly smaller */
    color: inherit; /* Inherit color from button text */
    cursor: help; /* Indicate it provides help */
    vertical-align: middle; /* Align with text */
    opacity: 0.7;
}

.filter-btn:hover .info-icon {
    opacity: 1;
}

/* Ensure tooltips are visible */
.tooltip {
  z-index: 1080; /* Ensure tooltip is above most elements */
}

/* Provider type search results styling */
/* Provider type results, facility selected, scroll indicator, geographic warning, and abuse warning styles moved to facility-styles.css */

/* --- Share Button Styles --- */
.share-button-container {
    position: fixed;
    bottom: 30px;
    right: 120px; /* Positioned to the left of the PDF button */
    z-index: 1500;
}

.share-btn {
    display: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease;
    padding: 0.9rem 1.4rem;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    background: linear-gradient(90deg, #0891b2, #06b6d4); /* Cyan gradient */
    color: white !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    border: none;
    border-radius: var(--radius-full);
    box-shadow: 0 10px 25px -5px rgba(8, 145, 178, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    position: relative;
}

.share-btn:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0.1), rgba(255,255,255,0.2));
    transform: translateX(-100%);
    transition: transform 0.6s ease;
    z-index: -1;
}

.share-btn:hover:before {
    transform: translateX(0);
}

.share-btn:hover {
    box-shadow: 0 15px 30px -5px rgba(8, 145, 178, 0.5), 0 10px 15px -5px rgba(0, 0, 0, 0.1);
}

.share-btn:active {
    box-shadow: 0 5px 15px -3px rgba(8, 145, 178, 0.4);
}

.share-btn.show {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    opacity: 1;
    visibility: visible;
    will-change: opacity;
}

.share-btn svg {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.share-btn span {
    color: white !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Share dropdown menu */
.share-dropdown {
    position: absolute;
    bottom: calc(100% + 10px);
    right: 0;
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.05);
    min-width: 200px;
    padding: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1600;
}

.share-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.share-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem 1rem;
    border: none;
    background: none;
    color: var(--neutral-700);
    font-size: 0.9rem;
    font-weight: 500;
    text-align: left;
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
    cursor: pointer;
}

.share-option:hover {
    background: var(--neutral-100);
    color: var(--neutral-900);
}

.share-option:active {
    background: var(--neutral-200);
}

.share-option svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Specific share option colors on hover */
.share-option[data-share-type="email"]:hover {
    color: var(--primary);
}

.share-option[data-share-type="copy"]:hover {
    color: var(--success);
}

.share-option[data-share-type="facebook"]:hover {
    color: #1877f2;
}

.share-option[data-share-type="twitter"]:hover {
    color: #000;
}

/* Copy feedback tooltip */
.copy-feedback {
    position: absolute;
    bottom: calc(100% + 5px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--neutral-800);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.copy-feedback.show {
    opacity: 1;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .share-button-container {
        right: 30px;
        bottom: 90px; /* Stack vertically on mobile */
    }
    
    .share-dropdown {
        right: 0;
        left: auto;
        max-width: calc(100vw - 60px);
    }
}