/* Temporary success and informational messages */
.flash-message {
    transition: opacity 180ms ease, transform 180ms ease;
}

.flash-message.is-dismissing {
    opacity: 0;
    transform: translateY(-0.25rem);
}

@media (prefers-reduced-motion: reduce) {
    .flash-message {
        transition: none;
    }
}

.copy-link-button {
    transition: background-color 160ms ease, transform 160ms ease;
}

.copy-link-button:hover {
    background-color: #166534;
}

.copy-link-button.is-copied {
    background-color: #047857;
    transform: scale(0.97);
}

.copy-link-button.is-copy-error {
    background-color: #b91c1c;
}

/* =========================================
   1. SUMMARY CARDS (Dashboard)
========================================= */
.markdown-summary p {
    margin-bottom: 0.5rem;
}
.markdown-summary p:last-child {
    margin-bottom: 0;
}
.markdown-summary ul {
    list-style-type: disc;
    padding-left: 1.25rem;
    margin-bottom: 0.5rem;
}
.markdown-summary strong {
    color: #374151; /* Darker gray for contrast */
    font-weight: 600;
}

/* =========================================
   2. CHAT & INSIGHTS BUBBLES (Analytics)
========================================= */
.markdown-bubble p {
    margin-bottom: 0.5rem;
}
.markdown-bubble p:last-child {
    margin-bottom: 0;
}
.markdown-bubble strong {
    font-weight: 700;
}
.markdown-bubble a {
    color: #3B82F6; /* Tailwind Blue-500 */
    text-decoration: underline;
    word-break: break-all;
}
.markdown-bubble ul {
    list-style-type: disc;
    padding-left: 1.25rem;
    margin-top: 0.25rem;
    margin-bottom: 0.5rem;
}
/* Ensure images sent by the user/bot fit nicely inside the chat bubble */
.markdown-bubble img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    border: 1px solid #e5e7eb;
}

/* =========================================
   3. CUSTOM SCROLLBARS (Sleek UI)
========================================= */
/* Makes the new scrolling tables look premium instead of chunky default OS scrollbars */
.overflow-auto::-webkit-scrollbar,
#insights-body::-webkit-scrollbar,
#modal-chat-body::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.overflow-auto::-webkit-scrollbar-track,
#insights-body::-webkit-scrollbar-track,
#modal-chat-body::-webkit-scrollbar-track {
    background: transparent; 
}
.overflow-auto::-webkit-scrollbar-thumb,
#insights-body::-webkit-scrollbar-thumb,
#modal-chat-body::-webkit-scrollbar-thumb {
    background-color: #cbd5e1; /* Tailwind Gray-300 */
    border-radius: 10px;
}
.overflow-auto::-webkit-scrollbar-thumb:hover,
#insights-body::-webkit-scrollbar-thumb:hover,
#modal-chat-body::-webkit-scrollbar-thumb:hover {
    background-color: #94a3b8; /* Tailwind Gray-400 */
}

/* =========================================
   4. DATA TABLES (Analytics Dashboard)
========================================= */
.table-container {
    max-height: 400px;
    overflow: auto;
}

.data-table {
    min-width: 100%;
    text-align: left;
    font-size: 0.875rem; /* text-sm */
    white-space: nowrap;
}

/* Sticky Header Styling */
.data-table thead {
    background-color: #f9fafb; /* bg-gray-50 */
    text-transform: uppercase;
    letter-spacing: 0.05em; /* tracking-wider */
    color: #6b7280; /* text-gray-500 */
    font-size: 10px;
    font-weight: 700;
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: 0 1px 0 0 #f3f4f6; /* Bottom border mimic */
}

.data-table th {
    padding: 0.625rem 1rem; /* px-4 py-2.5 */
}

/* Row Hover & Border Styling */
.data-table tbody tr {
    border-bottom: 1px solid #f9fafb; /* border-gray-50 */
    transition: background-color 0.2s ease-in-out;
}

.data-table tbody tr:hover {
    background-color: #f9fafb; /* hover:bg-gray-50 */
}

.data-table td {
    padding: 0.5rem 1rem; /* px-4 py-2 */
}