/* Custom styles for Inter font and general aesthetics */
            body {
                font-family: "Inter", sans-serif;
                background: linear-gradient(to right bottom, #6a11cb, #2575fc);
                min-height: 100vh;
                display: flex;
                flex-direction: column;
                padding: 0;
                margin: 0;
            }

            .main-content-wrapper {
                flex-grow: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 1rem;
                padding-top: 5rem;
            }

            /* Nav Bar Styles */
            nav {
                background-color: #1a202c;
                color: #fff;
                padding: 1rem;
                position: fixed;
                top: 0;
                width: 100%;
                z-index: 100;
                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
            }

            nav a {
                color: #fff;
                text-decoration: none;
                padding: 0.5rem 1rem;
                border-radius: 0.5rem;
                transition: background-color 0.2s;
            }

            nav a:hover {
                background-color: #2d3748;
            }

            /* Footer Styles */
            footer {
                background-color: #1a202c;
                color: #a0aec0;
                padding: 1.5rem;
                text-align: center;
                font-size: 0.9rem;
                width: 100%;
                box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
                margin-top: auto;
            }

            .history-container {
                background-color: rgba(255, 255, 255, 0.95);
                border-radius: 1.5rem;
                box-shadow:
                    0 20px 25px -5px rgba(0, 0, 0, 0.1),
                    0 10px 10px -5px rgba(0, 0, 0, 0.04);
                padding: 2.5rem;
                max-width: 900px;
                width: 100%;
                display: flex;
                flex-direction: column;
                gap: 1.5rem;
            }

            .history-item {
                background-color: #f8fafc;
                border-radius: 0.75rem;
                padding: 1.5rem;
                margin-bottom: 1rem;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
                transition:
                    transform 0.2s,
                    opacity 0.3s ease-in-out;
                opacity: 0; /* Initial state for animation */
                transform: translateY(10px); /* Initial state for animation */
            }

            .history-item.show {
                opacity: 1;
                transform: translateY(0);
            }

            .history-item:hover {
                transform: translateY(-2px);
            }

            .sentiment-badge {
                display: inline-block;
                padding: 0.25rem 0.75rem;
                border-radius: 9999px;
                font-weight: 600;
                font-size: 0.875rem;
            }

            .sentiment-badge.positive {
                background-color: #d1fae5;
                color: #065f46;
            }

            .sentiment-badge.negative {
                background-color: #fee2e2;
                color: #991b1b;
            }

            .sentiment-badge.neutral {
                background-color: #e5e7eb;
                color: #4b5563;
            }

            .text-preview {
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .empty-state {
                text-align: center;
                padding: 2rem;
            }

            .empty-state-icon {
                width: 4rem;
                height: 4rem;
                margin: 0 auto 1rem;
                color: #9ca3af;
            }

            .pagination {
                display: flex;
                justify-content: center;
                margin-top: 1.5rem;
                gap: 0.5rem;
            }

            .pagination-button {
                padding: 0.5rem 1rem;
                border: 1px solid #e5e7eb;
                border-radius: 0.375rem;
                background-color: white;
                cursor: pointer;
                transition: all 0.2s;
            }

            .pagination-button:hover {
                background-color: #f3f4f6;
            }

            .pagination-button.active {
                background-color: #3b82f6;
                color: white;
                border-color: #3b82f6;
            }

            .pagination-button:disabled {
                opacity: 0.5;
                cursor: not-allowed;
            }

            /* Modals */
            .modal {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0.5);
                display: flex;
                align-items: center;
                justify-content: center;
                z-index: 1000;
                opacity: 0;
                pointer-events: none;
                transition: opacity 0.3s ease;
            }

            .modal.active {
                opacity: 1;
                pointer-events: auto;
            }

            .modal-content {
                background-color: white;
                border-radius: 1rem;
                width: 90%;
                max-width: 800px;
                max-height: 90vh;
                overflow-y: auto;
                padding: 2rem;
                box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
                position: relative; /* For close button positioning */
            }

            .modal-close-button {
                position: absolute;
                top: 1rem;
                right: 1rem;
                background: none;
                border: none;
                font-size: 1.5rem;
                cursor: pointer;
                color: #6b7280;
            }

            .modal-close-button:hover {
                color: #1f2937;
            }