/* Sounds Like Me Insights Dashboard Styles - Minimal Version */

/* Make analytics cards use grid layout for consistent structure */
.analytics-card {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas:
        "header"
        "chart"
        "level"
        "description";
    min-height: 380px; /* Minimum height to accommodate all components */
    align-items: start;
    padding: 16px;
    background-color: var(--bg-quatenary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

    /* Place each element in its designated grid area */
    .analytics-card .music-info {
        grid-area: header;
        margin-bottom: 12px;
        width: 100%;
        /* Preserve original styling - no text align center */
    }

        /* Preserve original styling for music-info elements */
        .analytics-card .music-info h3 {
            margin: 0 0 5px 0;
            font-size: 18px;
            font-weight: 500;
            color: var(--text-primary);
        }

        .analytics-card .music-info p {
            margin: 0;
            font-size: 14px;
            color: var(--text-secondary);
        }

    .analytics-card .trait-chart-container {
        grid-area: chart;
        width: 165px;
        height: 165px;
        margin: 0 auto;
        position: relative;
    }

    .analytics-card .trait-level {
        grid-area: level;
        margin: 12px 0;
        text-align: center;
        width: 100%;
    }

    .analytics-card .trait-description {
        grid-area: description;
        min-height: 60px; /* Space for 2-3 lines of text */
        font-size: 14px;
        color: var(--text-secondary);
        text-align: center;
        padding: 0 8px;
        align-self: start; /* Align to top of grid area */
        width: 100%;
    }

/* Trait level indicator */
.trait-indicator {
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 500;
    display: inline-block;
}

    .trait-indicator.high {
        background-color: rgba(120, 201, 120, 0.25);
        color: #2e7d32;
    }

    .trait-indicator.medium {
        background-color: rgba(241, 196, 15, 0.25);
        color: #d68910;
    }

    .trait-indicator.low {
        background-color: rgba(220, 220, 220, 0.25);
        color: #707070;
    }

/* Analytics overview grid */
.analytics-overview {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

/* Section content */
.analytics-section-content {
    padding: 20px;
}

    .analytics-section-content h2 {
        margin-bottom: 8px;
        color: var(--text-primary);
    }

.analytics-description {
    color: var(--text-secondary);
    margin-bottom: 24px;
    font-size: 16px;
}

/* Accordion styles */
.accordion-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.accordion-item {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.accordion-header {
    padding: 16px;
    background-color: var(--bg-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.accordion-toggle {
    font-size: 20px;
    font-weight: bold;
}

.accordion-content {
    padding: 0 16px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out;
    background-color: var(--bg-primary);
}

    .accordion-content p {
        margin: 16px 0;
    }

/* Trait spectrum comparison */
.trait-spectrum {
    display: flex;
    margin-bottom: 16px;
    gap: 32px;
}

.spectrum-low, .spectrum-high {
    flex: 1;
}

    .spectrum-low h4, .spectrum-high h4 {
        margin-bottom: 8px;
        font-size: 16px;
    }

.spectrum-low {
    color: var(--text-primary);
}

.spectrum-high {
    color: var(--text-primary);
}

/* Insights grid */
.insights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.insight-card {
    background-color: var(--bg-primary);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.insight-header {
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.insight-content {
    padding: 16px;
}

/* Ensure chart is always properly sized */
.trait-chart-container canvas {
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: 0 auto;
}

/* Analytics Panels */
.analytics-panels-row {
    margin-bottom: 24px;
}

.analytics-panel {
    background-color: var(--bg-primary);
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

    .analytics-panel.full-width {
        width: 100%;
    }

/*    .analytics-panel h3 {
        margin-top: 0;
        margin-bottom: 16px;
        font-size: 18px;
        font-weight: 500;
        color: var(--text-primary);
    }
*/
/* Action buttons */
.action-buttons-container {
    margin: 20px;
    display: flex;
    gap: 12px;
    justify-content: center;
}

.center-button {
    text-align: center;
    margin-top: 16px;
}

/* Hidden class for tab switching */
.hidden {
    display: none !important;
}

/* Dark mode adjustments */
body[data-theme="dark"] .trait-indicator.high {
    background-color: rgba(46, 125, 50, 0.2);
    color: #81c784;
}

body[data-theme="dark"] .trait-indicator.medium {
    background-color: rgba(214, 137, 16, 0.2);
    color: #ffca28;
}

body[data-theme="dark"] .trait-indicator.low {
    background-color: rgba(120, 120, 120, 0.2);
    color: #bdbdbd;
}

/* SLM dark mode adjustments */
body[data-theme="slm-dark"] .trait-indicator.high {
    /* mint-green at 20% */
    background-color: rgba(105, 240, 174, 0.2);
    color: #69F0AE; /* mint green */
}

body[data-theme="slm-dark"] .trait-indicator.medium {
    /* golden yellow at 20% */
    background-color: rgba(253, 219, 58, 0.2);
    color: #FDBD3A; /* warm gold */
}

body[data-theme="slm-dark"] .trait-indicator.low {
    /* near-white at 20% */
    background-color: rgba(245, 245, 245, 0.2);
    color: #F5F5F5; /* light grey-white */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .trait-spectrum {
        flex-direction: column;
        gap: 16px;
    }

    .insights-grid {
        grid-template-columns: 1fr;
    }

    .analytics-overview {
        grid-template-columns: 1fr;
    }

    .analytics-card {
        min-height: 320px; /* Slightly smaller on mobile */
    }

        .analytics-card .trait-description {
            min-height: 40px; /* Less space on mobile */
        }
}

.bottom-section {
    top: 0;
    z-index: 10;
    width: 100%;
    display: flex;
    justify-content: center;
    padding-bottom: 0.5rem;
    background-color: transparent;
}

.accordion-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    color: var(--text-primary);
}

.insight-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    color: var(--text-primary);
}

.personalized-insight {
    background-color: rgba(37, 99, 235, 0.1); /* Using a blue from your theme with low opacity */
    border-left: 3px solid #2563eb; /* Using --bg-tertiary from dark theme */
    padding: 12px 15px;
    margin: 15px 0;
    border-radius: 4px;
}

/* Add theme-specific variations */
body[data-theme="dark"] .personalized-insight {
    background-color: rgba(37, 99, 235, 0.15);
    border-left: 3px solid #2563eb;
}

body[data-theme="slm-dark"] .personalized-insight {
    background-color: rgba(37, 99, 235, 0.15);
    border-left: 3px solid #2563eb;
}

.spider-chart-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    border-radius: 15px;
    width: 100%;
    max-width: 650px;
    margin: 0 auto;
}

#personality-spider-chart {
    width: min(100%, 400px) !important;
    height: auto !important;
    aspect-ratio: 1;
    margin: 0;
    max-width: none !important;
    max-height: none !important;
}

.spider-chart-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 20px;
    padding: 12px 8px 4px;
    width: 100%;
}

.spider-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.spider-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.spider-legend-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.spider-legend-score {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

.spider-legend-pct {
    font-size: 11px;
    font-weight: 500;
}

@media (max-width: 768px) {
    #personality-spider-chart {
        width: 100% !important;
        height: auto !important;
    }

    .spider-chart-legend {
        gap: 8px 14px;
    }

    .spider-legend-name {
        font-size: 12px;
    }
}

/* Hide full text on small screens */
@media (max-width: 768px) {
    #backToChatButton .full-text,
    #shareProfileMainButton .full-text,
    #continueToConversationButton .full-text,
    #compareProfileMainButton .full-text {
        display: none;
    }

    #backToChatButton .short-text,
    #shareProfileMainButton .short-text,
    #continueToConversationButton .short-text,
    #compareProfileMainButton .short-text {
        display: inline;
    }
}

/* Hide short text on larger screens */
@media (min-width: 769px) {
    #backToChatButton .short-text,
    #shareProfileMainButton .short-text,
    #continueToConversationButton .short-text,
    #compareProfileMainButton .short-text {
        display: none;
    }

    #backToChatButton .full-text,
    #shareProfileMainButton .full-text,
    #continueToConversationButton .full-text,
    #compareProfileMainButton .full-text {
        display: inline;
    }
}

@media (max-width: 768px) {
    .spider-chart-section {
        display: none;
    }
}

.reports-pending .toolbar-button#backToChatButton,
.reports-pending .toolbar-button#shareProfileMainButton,
.reports-pending .toolbar-button#continueToConversationButton {
    display: none;
}

.report-loading-spinner {
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 3px solid #fff;
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    vertical-align: top;
    margin-left: 0;
}

.trait-nickname {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-align: center;
    padding: 0.25rem 0.5rem;
    word-wrap: break-word;
    hyphens: auto;
    line-height: 1.2;
    background: var(--bg-muted);
    border-radius: 4px;
    display: inline-block;
    max-width: 100%;
}

.status-bar-generating {
    display: none;
    color: var(--text-primary);
    font-size: 0.9rem;
    margin-left: 1rem;
    align-items: center;
}

.reports-pending .status-bar-generating {
    display: inline-flex;
    gap: 0.5rem;
}

.status-bar-spinner {
    width: 1em;
    height: 1em;
    border: 3px solid var(--text-primary);
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Progress message rotation during report generation */
.status-bar-progress-message {
    color: var(--text-secondary, #aaa);
    font-size: 0.8rem;
    white-space: nowrap;
    opacity: 1;
    transition: opacity 0.4s ease;
}

    .status-bar-progress-message.fade-out {
        opacity: 0;
    }

#generatingNotificationMessage,
#reportLoadingMessage {
    transition: opacity 0.4s ease;
}

/* Desktop-only narration: on mobile the spinner is the sole progress signal */
@media (max-width: 480px) {
    .status-bar-progress-message {
        display: none;
    }
}

/* Insights toolbar on mobile: once reports complete the buttons outgrow the row, so the
   button group scrolls sideways inside itself instead of widening the page (which also
   widened the mobile layout viewport and pushed fixed overlays off-screen). */
@property --toolbar-fade-opacity {
    syntax: '<number>';
    inherits: false;
    initial-value: 0;
}

@keyframes toolbar-fade-until-end {
    0%, 85% { --toolbar-fade-opacity: 1; }
    100% { --toolbar-fade-opacity: 0; }
}

@media (max-width: 480px) {
    .user-info:has(#compareProfileMainButton) {
        min-width: 0;
    }

    .left-controls:has(#compareProfileMainButton) {
        position: relative; /* containing block for the ☰ dropdown, outside the scroller so it isn't clipped */
        min-width: 0;
        gap: 0.375rem;
        timeline-scope: --toolbar-scroll;
    }

    .toolbar-actions:has(#compareProfileMainButton) {
        position: static;
        min-width: 0;
        gap: 0.375rem;
        overflow-x: auto;
        overflow-y: hidden;
        padding-right: 1.5rem; /* lets the last button scroll clear of the fade */
        scrollbar-width: none;
        scroll-timeline: --toolbar-scroll inline;
    }

        .toolbar-actions:has(#compareProfileMainButton)::-webkit-scrollbar {
            display: none;
        }

        .toolbar-actions:has(#compareProfileMainButton) > * {
            flex-shrink: 0; /* scroll rather than squeeze - keeps "Sign Up" on one line */
        }

    .status-bar:has(#compareProfileMainButton) .right-controls {
        gap: 0.375rem;
    }

    /* Right-edge fade: cues that the row scrolls. Overlay, not a mask - a mask would clip the dropdown. */
    .left-controls:has(#compareProfileMainButton)::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 1.5rem;
        pointer-events: none;
        background: linear-gradient(to right, transparent, var(--bg-primary));
        opacity: var(--toolbar-fade-opacity);
    }

    /* Where supported, show the fade only while more buttons remain to the right
       (the timeline is inactive - so no fade - when the row doesn't overflow) */
    @supports (animation-timeline: scroll()) {
        .left-controls:has(#compareProfileMainButton)::after {
            animation: toolbar-fade-until-end linear both;
            animation-timeline: --toolbar-scroll;
        }
    }

    /* Otherwise a static fade, only once the completed-state buttons are revealed */
    @supports not (animation-timeline: scroll()) {
        .status-bar:not(.reports-pending) .left-controls:has(#compareProfileMainButton)::after {
            --toolbar-fade-opacity: 1;
        }
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}