.chart-container {
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .chart-container canvas {
            max-width: 100%;
            max-height: 100%;
        }

        /* Ensure all charts stay within their containers */
        .h-64, .h-96 {
            width: 100%;
            max-width: 100%;
            position: relative;
            overflow: hidden;
            box-sizing: border-box;
        }

        .h-64 canvas, .h-96 canvas {
            width: 100% !important;
            height: 100% !important;
            max-width: 100% !important;
            max-height: 100% !important;
            display: block;
            box-sizing: border-box;
        }

        /* Prevent chart bleeding */
        canvas {
            display: block;
            box-sizing: border-box;
        }

        .h-80 {
            width: 100%;
            max-width: 100%;
            height: 20rem;
            position: relative;
            overflow: hidden;
            box-sizing: border-box;
        }

        .h-80 canvas {
            width: 100% !important;
            height: 100% !important;
            max-width: 100% !important;
            display: block;
            box-sizing: border-box;
        }

        /* Fix Plotly chart overflow */
        .js-plotly-plot {
            width: 100% !important;
            max-width: 100% !important;
        }

        .cashflow-metric:hover {
            background: #f3f4f6;
            border-color: #d1d5db;
            transform: translateY(-1px);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }

        /* Subsection navigation styles */
        #summary-subsections {
            transition: all 0.3s ease;
        }

        .subsection-link {
            position: relative;
            transition: all 0.2s ease;
        }

        .subsection-link:hover {
            padding-left: 1.25rem;
        }

        .subsection-link.text-blue-600::before {
            content: '▸';
            position: absolute;
            left: 0.5rem;
            color: #2563eb;
        }

        .cashflow-metric-label {
            font-size: 0.75rem;
            color: #6b7280;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 0.25rem;
        }

        .cashflow-metric-value {
            font-size: 1.25rem;
            font-weight: 600;
            margin-bottom: 0.25rem;
        }

        .cashflow-metric-detail {
            font-size: 0.75rem;
            color: #9ca3af;
        }

        .cashflow-metric.positive .cashflow-metric-value {
            color: #059669;
        }

        .cashflow-metric.negative .cashflow-metric-value {
            color: #dc2626;
        }

        .cashflow-metric.neutral .cashflow-metric-value {
            color: #374151;
        }

        /* Chart Icon Styles */
        .chart-icon {
            cursor: pointer;
            opacity: 0.6;
            transition: opacity 0.2s ease;
            width: 16px;
            height: 16px;
            margin-left: 8px;
            flex-shrink: 0;
        }

        .chart-icon:hover {
            opacity: 1;
        }

        /* Chart Overlay Modal */
        .chart-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            z-index: 1000;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .chart-overlay.hidden {
            display: none;
        }

        .chart-modal {
            background: white;
            border-radius: 12px;
            width: 95%;
            max-width: 900px;
            max-height: 90%;
            position: relative;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
            display: flex;
            flex-direction: column;
        }

        .chart-modal-title-header {
            padding: 16px 20px;
            border-bottom: 1px solid #e5e7eb;
            background: #f9fafb;
            flex-shrink: 0;
        }

        .chart-modal-controls {
            padding: 12px 20px;
            border-bottom: 1px solid #e5e7eb;
            background: #ffffff;
            flex-shrink: 0;
        }

        .chart-modal-title {
            font-size: 18px;
            font-weight: 600;
            color: #111827;
        }

        .chart-modal-close {
            cursor: pointer;
            background: none;
            border: none;
            font-size: 24px;
            color: #6b7280;
            padding: 4px;
            border-radius: 4px;
            transition: background-color 0.2s ease;
        }

        .chart-modal-close:hover {
            background-color: #f3f4f6;
        }

        .chart-modal-content {
            padding: 20px;
            flex: 1;
            min-height: 500px;
            position: relative;
        }

        /* Bar Rating Styles */
        .star-rating {
            display: inline-flex;
            align-items: center;
            gap: 1px;
            margin-left: 8px;
            height: 16px;
            border-radius: 8px;
            overflow: hidden;
            border: 1px solid #e5e7eb;
        }

        .rating-segment {
            height: 100%;
            width: 20px;
            background-color: #f3f4f6;
            transition: background-color 0.2s ease;
        }

        .rating-segment.filled-excellent {
            background-color: #10b981; /* Green for excellent */
        }

        .rating-segment.filled-good {
            background-color: #84cc16; /* Light green for good */
        }

        .rating-segment.filled-okay {
            background-color: #eab308; /* Yellow for okay */
        }

        .rating-segment.filled-poor {
            background-color: #f97316; /* Orange for poor */
        }

        .rating-segment.filled-bad {
            background-color: #ef4444; /* Red for bad */
        }

        .rating-label {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 8px;
            font-weight: 600;
        }

        /* Markdown Content Styles for Key Investment Highlights */
        .markdown-content ul {
            list-style-type: disc;
            margin-left: 1.5rem;
            margin-bottom: 0.5rem;
        }

        .markdown-content li {
            margin-bottom: 0.5rem;
            line-height: 1.5;
        }

        .markdown-content p {
            margin-bottom: 0.5rem;
        }


        /* Embedded Article Styles - From article.html */
        .embedded-article {
            font-family: 'IBM Plex Sans', sans-serif;
            background-color: #fdfdfd;
            color: #333;
            font-size: 18px;
            line-height: 1.6;
        }

        .embedded-article p { margin-bottom: 20px; }
        .embedded-article h1, .embedded-article h2, .embedded-article h3, .embedded-article h4, .embedded-article h5, .embedded-article h6 {
            font-weight: bold; margin-top: 40px; margin-bottom: 20px; color: #111;
        }
        .embedded-article h1:first-child, .embedded-article h2:first-child, .embedded-article h3:first-child {
            margin-top: 0;
        }
        .embedded-article h1 { font-size: 22px; }
        .embedded-article h2 { font-size: 20px; }
        .embedded-article h3 { font-size: 18px; }
        .embedded-article h4 { font-size: 16px; }
        .embedded-article h5 { font-size: 14px; }
        .embedded-article h6 { font-size: 13px; }
        .embedded-article ul, .embedded-article ol { margin-bottom: 20px; padding-left: 30px; }
        .embedded-article ul { list-style-type: disc; }
        .embedded-article ol { list-style-type: decimal; }
        .embedded-article li { margin-bottom: 10px; }
        .embedded-article a { color: #007acc; text-decoration: none; }
        .embedded-article a:hover { text-decoration: underline; }

        /* Chart Styles for Embedded Article */
        .embedded-article .beyondspx-chart-container {
            position: relative; margin-bottom: 20px; display: flex; flex-direction: column;
            align-items: center; border: none !important; padding: 0 !important;
            width: 100% !important; box-sizing: border-box; margin-top: 10px;
        }

        .embedded-article .beyondspx-chart-container .plotly-wrapper {
            flex-grow: 1; width: 100% !important; position: relative;
            display: flex; align-items: center; justify-content: center;
            aspect-ratio: 16 / 9;
            min-height: 250px;
            max-height: 450px;
        }

        .embedded-article .beyondspx-chart-container .plotly-wrapper-pie-fullwidth {
            width: 100% !important;
            max-width: 100% !important;
            position: relative;
            padding: 0 15px;
            box-sizing: border-box;
            height: clamp(300px, 60vh, 500px);
            aspect-ratio: unset !important;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .embedded-article .beyondspx-chart-container .plotly-wrapper > .js-plotly-plot,
        .embedded-article .beyondspx-chart-container .plotly-wrapper-pie-fullwidth > .js-plotly-plot {
            width: 100% !important;
            height: 100% !important;
            border: none !important;
            padding: 0 !important;
        }

        .embedded-article .chart-controls {
            position: static; background: #fff; padding: 10px; border-radius: 5px;
            font-size: 14px; margin-top: 10px; width: 100% !important;
            box-sizing: border-box; display: flex; flex-wrap: wrap; gap: 15px;
            align-items: center; justify-content: center; flex-shrink: 0;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
        }

        .embedded-article .period-toggle { display: flex; border: 1px solid #ccc; border-radius: 4px; overflow: hidden; font-size: 13px; }
        .embedded-article .period-toggle-button {
            padding: 5px 10px; cursor: pointer; background-color: #f0f0f0; color: #333;
            border: none; outline: none; transition: background-color 0.2s ease, color 0.2s ease;
            text-align: center;
        }
        .embedded-article .period-toggle-button:hover:not(:disabled) { background-color: #e0e0e0; }
        .embedded-article .period-toggle-button.active { background-color: #007acc; color: white; font-weight: bold; }
        .embedded-article .period-toggle-button:disabled { background-color: #e9ecef; color: #adb5bd; cursor: not-allowed; }

        .article-header {
            border-bottom: 2px solid #e8eaed;
            padding-bottom: 20px;
            margin-bottom: 30px;
        }

        .article-meta {
            font-size: 14px;
            color: #777;
            margin-bottom: 20px;
        }

        /* Chart Overlay Styles */
        .chart-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .chart-modal {
            background: white;
            border-radius: 8px;
            width: 90%;
            max-width: 1200px;
            height: 80%;
            max-height: 800px;
            display: flex;
            flex-direction: column;
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }

        .chart-modal-title-header {
            padding: 16px 24px;
            border-bottom: 1px solid #e5e7eb;
            background: #f9fafb;
            flex-shrink: 0;
        }

        .chart-modal-controls {
            padding: 12px 24px;
            border-bottom: 1px solid #e5e7eb;
            background: #ffffff;
            flex-shrink: 0;
        }

        .chart-modal-title {
            font-size: 18px;
            font-weight: 600;
            color: #111827;
            margin: 0;
        }

        .chart-modal-content {
            flex: 1;
            padding: 24px;
            overflow: hidden;
            position: relative;
            min-height: 0; /* Important for Firefox */
            height: 600px; /* Increased height for better visibility */
        }

        .chart-modal-close {
            font-size: 24px;
            color: #6b7280;
            background: none;
            border: none;
            cursor: pointer;
            padding: 0;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            transition: background-color 0.2s;
        }

        .chart-modal-close:hover {
            background-color: #f3f4f6;
            color: #374151;
        }

        #overlay-chart {
            width: 100% !important;
            height: calc(100% - 16px) !important; /* Account for padding */
            max-height: 100%;
            position: relative;
        }

        /* Style for metric toggle checkbox */
        .metric-toggle-container {
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            border-radius: 0.375rem;
            padding: 0.75rem;
            margin-bottom: 1rem;
        }

        /* Chart container transition styles */
        .h-64 {
            transition: all 0.3s ease;
        }

        /* Hidden chart containers */
        .chart-hidden {
            display: none !important;
        }

        /* Mobile-specific styles */
        @media (max-width: 1023px) {
            /* Remove all horizontal padding/margins for full-width mobile */
            body, .base-layout {
                margin: 0 !important;
                padding: 0 !important;
            }

            /* Remove header padding on mobile */
            .header-container {
                padding: 0 8px !important;
            }

            /* Override any max-width constraints */
            .min-h-screen, main {
                width: 100vw !important;
                max-width: 100vw !important;
                margin: 0 !important;
                padding: 0 !important;
            }
            /* Make navigation tabs scrollable horizontally on mobile */
            .tab-link {
                white-space: nowrap;
            }

            /* Make nav container scrollable on mobile */
            nav ul {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
            }

            /* Increase container widths on mobile */
            .min-h-screen {
                overflow-x: auto;
            }

            /* Make main content sections use proper width on mobile */
            .flex-1.min-w-0 .bg-white.rounded-lg.shadow {
                width: 100%;
                max-width: 100%;
                margin-left: 0;
                margin-right: 0;
                box-sizing: border-box;
            }

            /* Chart containers should use full parent width on mobile */
            #price-chart, .h-64, .h-96 {
                width: 100%;
                min-width: auto;
                max-width: 100%;
                overflow: hidden !important;
                box-sizing: border-box !important;
                position: relative; /* Enable absolute positioning for news icons */
            }

            /* Ensure canvas elements don't overflow on mobile */
            #price-chart canvas, .h-64 canvas, .h-96 canvas {
                max-width: 100% !important;
                max-height: 100% !important;
                width: 100% !important;
                height: 100% !important;
                box-sizing: border-box !important;
            }

            /* News icon styles */
            .news-icon {
                transition: transform 0.2s ease, box-shadow 0.2s ease;
            }

            .news-icon:hover {
                transform: scale(1.25);
                box-shadow: 0 4px 8px rgba(0,0,0,0.4) !important;
            }

            .news-tooltip {
                box-shadow: 0 4px 12px rgba(0,0,0,0.3);
                line-height: 1.4;
            }

            .news-tooltip::after {
                content: '';
                position: absolute;
                top: 100%;
                left: 50%;
                transform: translateX(-50%);
                border: 6px solid transparent;
                border-top-color: rgba(0, 0, 0, 0.9);
            }

            /* Navigation sidebar uses proper width on mobile */
            .w-full.lg\\:w-64 {
                width: 100%;
                max-width: 100%;
                margin-left: 0;
                margin-right: 0;
                box-sizing: border-box;
            }

            /* Horizontal scrollable tabs on mobile */
            .mobile-horizontal-nav {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
                -ms-overflow-style: none;
            }

            .mobile-horizontal-nav::-webkit-scrollbar {
                display: none;
            }

            .mobile-horizontal-nav ul {
                display: flex;
                flex-direction: row;
                padding: 0;
                margin: 0;
                min-width: max-content;
            }

            .mobile-horizontal-nav .tab-link {
                border-left: none !important;
                border-bottom: 3px solid transparent;
                padding: 12px 20px;
                white-space: nowrap;
                display: block;
            }

            .mobile-horizontal-nav .tab-link.active,
            .mobile-horizontal-nav .border-blue-500 {
                border-bottom-color: #2563eb !important;
                border-left: none !important;
                background: #eff6ff;
            }

            /* Add minimal padding to content areas so text doesn't touch edges */
            .bg-white.rounded-lg.shadow .p-4 {
                padding: 0.75rem !important;
            }

            /* Header content needs minimal padding */
            .w-full.lg\\:max-w-7xl > .flex {
                padding-left: 0.5rem;
                padding-right: 0.5rem;
            }

            /* Hide subsections on mobile by default */
            #summary-subsections {
                display: none;
            }

            #summary-subsections.mobile-expanded {
                display: block;
            }

            /* Reduce chart heights on mobile */
            .h-64 {
                height: 12rem;
            }

            .h-96 {
                height: 20rem;
            }

            /* Adjust modal size for mobile */
            .chart-modal {
                width: 100%;
                max-width: 100%;
                height: 100%;
                max-height: 100%;
                border-radius: 0;
            }

            /* Smaller text on mobile for metrics */
            .text-3xl {
                font-size: 1.875rem;
            }

            /* Adjust padding for mobile */
            .p-6 {
                padding: 1rem;
            }
        }

        @media (max-width: 639px) {
            /* Even smaller adjustments for very small screens */
            .text-2xl {
                font-size: 1.5rem;
            }

            .text-3xl {
                font-size: 1.5rem;
            }

            /* Stack price info vertically on very small screens */
            .price-display {
                text-align: left !important;
            }
        }

        /* News importance slider styles */
        .slider {
            -webkit-appearance: none;
            appearance: none;
            height: 4px;
            border-radius: 2px;
            background: #d1d5db;
            outline: none;
            transition: background 0.2s;
        }

        .slider:hover {
            background: #9ca3af;
        }

        .slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: #3b82f6;
            cursor: pointer;
            transition: all 0.2s;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
            border: 2px solid white;
        }

        .slider::-webkit-slider-thumb:hover {
            background: #2563eb;
            transform: scale(1.15);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
        }

        .slider::-moz-range-thumb {
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: #3b82f6;
            cursor: pointer;
            border: 2px solid white;
            transition: all 0.2s;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
        }

        .slider::-moz-range-thumb:hover {
            background: #2563eb;
            transform: scale(1.15);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
        }

        /* Chart overlay styles */
        #news-importance-slider {
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
        }

        /* Ensure slider stays above chart content */
        #price-chart canvas {
            position: relative;
            z-index: 1;
        }

        #news-importance-slider {
            z-index: 10;
        }