.feed-container {
    /* font-family: 'Red Hat Display', sans-serif; */
    /* font-weight: 500; */
}

/* Custom theme scrollbars for feed & PR details */
.feed-container,
.pr-container {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

html.dark .feed-container,
html.dark .pr-container {
    scrollbar-color: #475569 transparent;
}

.feed-container::-webkit-scrollbar,
.pr-container::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.feed-container::-webkit-scrollbar-track,
.pr-container::-webkit-scrollbar-track {
    background: transparent;
}

.feed-container::-webkit-scrollbar-thumb,
.pr-container::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 9999px;
    transition: background-color 0.2s ease;
}

.feed-container::-webkit-scrollbar-thumb:hover,
.pr-container::-webkit-scrollbar-thumb:hover {
    background-color: #94a3b8;
}

html.dark .feed-container::-webkit-scrollbar-thumb,
html.dark .pr-container::-webkit-scrollbar-thumb {
    background-color: #475569;
}

html.dark .feed-container::-webkit-scrollbar-thumb:hover,
html.dark .pr-container::-webkit-scrollbar-thumb:hover {
    background-color: #64748b;
}

.feed-time {
    font-family: 'Chivo Mono', monospace;
    padding-top: 1.5px;
}

.sidebar i {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    width: 40px;
}

.date-back, .date-forward {
    user-select: none;
}

/* Both the feed list and the pr panel are selectable regions; the rest of
   the page chrome stays non-selectable so dragging from one panel can't
   select text outside it. The JS confines selection to the starting panel. */
body {
    user-select: none;
    -webkit-user-select: none;
}

.feed-container,
.pr-container {
    user-select: text;
    -webkit-user-select: text;
}

.pr-container .analysis-models-container {
    user-select: none;
    -webkit-user-select: none;
}

/* Analysis key points — hanging indent so bullet lines wrap under the
   text start, not under the bullet square. */
.analysis-key-points {
    margin: 0;
    padding-left: 1.5em;
    list-style-type: square;
    list-style-position: outside;
}

.analysis-key-points li {
    padding-left: 0.25em;
}

.date-text {
    font-family: 'Chivo Mono', monospace;
    font-weight: 600;
}

/* Pulsating animation for generating text */
@keyframes pulsate {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.4;
    }
    100% {
        opacity: 1;
    }
}

.pulsate {
    animation: pulsate 1s ease-in-out infinite;
}

/* ==========================================================================
   True Dark Theme (Neutral Charcoal & Obsidian Black)
   ========================================================================== */

html.true-dark body {
    background-color: #09090b !important;
    color: #e4e4e7 !important;
}

html.true-dark .sidebar,
html.true-dark .search-bar,
html.true-dark .matches,
html.true-dark .live-button,
html.true-dark .date-change,
html.true-dark .feed-container,
html.true-dark .pr-container,
html.true-dark .main-content {
    background-color: #141417 !important;
    color: #e4e4e7 !important;
    border-color: #27272a !important;
}

html.true-dark input {
    color: #e4e4e7 !important;
}

html.true-dark input::placeholder {
    color: #71717a !important;
}

html.true-dark .feed-container > div {
    border-color: #222226 !important;
}

/* Row selection in True Dark */
html.true-dark .feed-container > div.bg-slate-300,
html.true-dark .feed-container > div.dark\:bg-slate-600 {
    background-color: #27272a !important;
}

/* Badges & secondary pills in True Dark */
html.true-dark .bg-slate-700,
html.true-dark .dark\:bg-slate-700 {
    background-color: #27272a !important;
}

html.true-dark .text-slate-300,
html.true-dark .dark\:text-slate-300 {
    color: #d4d4d8 !important;
}

/* Scrollbars in True Dark */
html.true-dark .feed-container,
html.true-dark .pr-container {
    scrollbar-color: #27272a transparent !important;
}

html.true-dark .feed-container::-webkit-scrollbar-thumb,
html.true-dark .pr-container::-webkit-scrollbar-thumb {
    background-color: #27272a !important;
}

html.true-dark .feed-container::-webkit-scrollbar-thumb:hover,
html.true-dark .pr-container::-webkit-scrollbar-thumb:hover {
    background-color: #3f3f46 !important;
}

/* Tooltip in True Dark */
html.true-dark #ticker-bubble-tooltip {
    background-color: #09090b !important;
    border-color: #27272a !important;
    color: #f4f4f5 !important;
}

/* Loading / No Analysis box in True Dark */
html.true-dark .loading-analysis {
    background-color: #141417 !important;
    border-color: #27272a !important;
    color: #a1a1aa !important;
}

/* ==========================================================================
   Feed Sentiment Badges Across Themes
   ========================================================================== */

/* 1. Light Theme: High-contrast, clean & readable */
.feed-container .bg-green-500,
.mobile-sentiment.bg-green-500 {
    background-color: #16a34a !important; /* emerald-600 */
    color: #ffffff !important;
}
.feed-container .bg-red-500,
.mobile-sentiment.bg-red-500 {
    background-color: #dc2626 !important; /* red-600 */
    color: #ffffff !important;
}
.feed-container .bg-gray-500,
.mobile-sentiment.bg-gray-500 {
    background-color: #64748b !important; /* slate-500 */
    color: #ffffff !important;
}

/* 2. Navy Theme: Vibrant, glowing accents on deep slate-blue */
html.dark:not(.true-dark) .feed-container .bg-green-500,
html.dark:not(.true-dark) .mobile-sentiment.bg-green-500 {
    background-color: #22c55e !important; /* green-500 vivid */
    color: #ffffff !important;
}
html.dark:not(.true-dark) .feed-container .bg-red-500,
html.dark:not(.true-dark) .mobile-sentiment.bg-red-500 {
    background-color: #ef4444 !important; /* red-500 vivid */
    color: #ffffff !important;
}
html.dark:not(.true-dark) .feed-container .bg-gray-500,
html.dark:not(.true-dark) .mobile-sentiment.bg-gray-500 {
    background-color: #475569 !important; /* slate-600 navy tone */
    color: #f1f5f9 !important;
}

/* 3. True Dark Theme: Deep, rich jewel tones (glare-free against OLED black) */
html.true-dark .feed-container .bg-green-500,
html.true-dark .mobile-sentiment.bg-green-500 {
    background-color: #15803d !important; /* green-700 deep forest */
    color: #f0fdf4 !important;
}
html.true-dark .feed-container .bg-red-500,
html.true-dark .mobile-sentiment.bg-red-500 {
    background-color: #b91c1c !important; /* red-700 deep crimson */
    color: #fef2f2 !important;
}
html.true-dark .feed-container .bg-gray-500,
html.true-dark .mobile-sentiment.bg-gray-500 {
    background-color: #3f3f46 !important; /* zinc-700 dark graphite */
    color: #e4e4e7 !important;
}

/* ==========================================================================
   Occasional Color Shade Transition for "LIVE •"
   ========================================================================== */

@keyframes liveColorPulse {
    0%, 68% {
        color: #22c55e;
    }
    82% {
        color: #86efac;
    }
    100% {
        color: #22c55e;
    }
}

.live-pulse {
    animation: liveColorPulse 4s ease-in-out infinite;
    transition: color 0.3s ease;
}

.live-pulse .live-dot {
    background-color: currentColor;
    transition: background-color 0.3s ease;
}

/* Flat Material Metric Tiles in True Dark */
html.true-dark .analysis-metric-item {
    background-color: #0c0c0e !important;
    border: 1px solid #1f1f23 !important;
}
html.true-dark .analysis-metric-item span:first-child {
    color: #a1a1aa !important;
}
html.true-dark .analysis-metric-item span:last-child {
    color: #f4f4f5 !important;
}