.conversationStats {
    // Color Variables
    --conversationStats-color-background: #ffffff;
    --conversationStats-color-border: #e5e7eb;
    --conversationStats-color-label: #6b7280;
    --conversationStats-color-value: #1f2937;
    --conversationStats-color-sublabel: #9ca3af;
    --conversationStats-color-user: #2563eb;
    --conversationStats-color-assistant: #16a34a;
    --conversationStats-color-tool: #ea580c;
    --conversationStats-color-tokens: #9333ea;

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;

    @media (min-width: 768px) {
        grid-template-columns: repeat(5, 1fr);
    }

    &__card {
        background-color: var(--conversationStats-color-background);
        border: 1px solid var(--conversationStats-color-border);
        border-radius: 0.5rem;
        padding: 0.75rem;
    }

    &__label {
        font-size: 0.75rem;
        color: var(--conversationStats-color-label);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin: 0;
    }

    &__value {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--conversationStats-color-value);
        margin: 0.25rem 0 0 0;

        &--user {
            color: var(--conversationStats-color-user);
        }

        &--assistant {
            color: var(--conversationStats-color-assistant);
        }

        &--tool {
            color: var(--conversationStats-color-tool);
        }

        &--tokens {
            font-size: 1.125rem;
            color: var(--conversationStats-color-tokens);
        }
    }

    &__sublabel {
        font-size: 0.75rem;
        color: var(--conversationStats-color-sublabel);
        margin: 0;
    }
}
